7 BAB 3
PELAKSANAAN KERJA MAGANG
3.1 Kedudukan dan Koordinasi
Dalam pelaksanaan kerja magang di PT. Bank Mandiri cabang Singkawang mahasiswa berada dibagian divisi General Affairs yaitu menjadi helper, dibawah bimbingan Bapak Rachmat Arindra, selaku Kepala General Affairs di PT. Bank Mandiri cabang Singkawang. Bapak Rachmat Arindra berperan dalam memberikan informasi dan bimbingan dalam kebutuhan-kebutuhan yang diperlukan pada rancang bangun aplikasi MESS berbasis website pada PT. Bank Madiri cabang Singkawang. Setiap minggu saat melakukan Work From Office (WFO) akan dilakukan pengecekan terhadap kemajuan yang sudah dikerjakan selama satu minggu tersebut dan yang akan dikerjakan selanjutnya.
3.2 Tugas yang Dilakukan
Selama melakukan kerja magang di PT. Bank Mandiri cabang Singkawang, pekerja magang diberikan tanggung jawab untuk membuat aplikasi MESS berbasis website dengan menggunakan framework bahasa pemograman PHP yaitu Laravel.
Pada tugas yang dikerjakan ini sesuai dengan kebutuhan yang diberikan dibuat untuk dua tipe pengguna yaitu admin dan pegawai.
3.3 Uraian Pelaksanaan 3.3.1 Proses Pelaksanaan
Kerja magang dilaksanakan selama 10 minggu dengan timeline sebagai berikut:
Tabel 3.1 Tabel Realisasi Kerja Magang
Minggu ke- Kegiatan
1 - Perkenalan lingkungan kerja magang - Pengarahan dari pembimbing lapangan
8 Tabel 3.1 Tabel Realisasi Kerja Magang (lanjutan)
Minggu ke- Kegiatan
2 - Memahami requirement yang dibutuhkan - Mendesain UI menggunakan figma
Menentukan framework untuk proyek magang ini 3 - Mendesain database dari excel ke MySQL 4 - Meng-input data ke database
5 - Membuat Halaman Login dan Register
6 - Membuat fungsi detail di halaman Dashboard admin - Membuat fungsi tambah produk di halaman Target 7 - Membuat fungsi hapus produk di halaman Target
- Membuat fungsi detail/ edit produk di halaman Target 8 - Membuat Halaman Dashboard pegawai
- Membuat fungsi edit dan hapus penjualan di Halaman Dashboard pegawai
9 - Membuat fungsi export ke Excel 10 - Testing dan perbaikan bug
3.3.2 Framework dan alur kerja
Pada minggu pertama kerja magang, mahasiswa melakukan briefing bersama pembimbing lapangan. Pada briefing ini dilakukan pengenalan mahasiswa yang magang kepada lingkuangan kerja magang, selain itu mahasiswa juga diberikan arahan terkait proyek yang akan dikerjakan. Kemudian diminggu kedua mahasiswa mulai mempelajari proyek yang akan dibuat di PT. Bank Mandiri cabang Singkawang, dan mahasiswa mulai mendesain User Interface (UI) untuk proyek yang akan dikerjakan.
Proyek yang akan dikerjakan ini berbasis website, sehingga dibutuhkan sebuah framework untuk membentuk website ini. Berdasarkan analisis yang dibutuhkan maka framework yang sesuai dengan kebutuhan pada proyek ini adalah framework php yaitu Laravel. Laravel adalah salah satu framework PHP open source yang populer digunakan untuk membuat aplikasi berbasis website. Laravel adalah sebuah framework PHP yang dirilis dibawah lisensi MIT, dibangun dengan konsep MVC (model view controller). Laravel adalah pengembangan website berbasis MVC yang ditulis dalam PHP yang dirancang untuk meningkatkan kualitas perangkat lunak dengan mengurangi biaya pengembangan awal dan biaya
9 pemeliharaan, dan untuk meningkatkan pengalaman bekerja dengan aplikasi dengan menyediakan sintaks yang ekspresif, jelas dan menghemat waktu (idCloudHost, 2016).
Kemudian pada minggu ketiga mahasiswa mendesain database berdasarkan data excel ke MySQL menggunakan website draw.io. Hasil dari desain database berbentuk ERD kemudian dimplementasikan kebentuk database dengan bahasa pemograma MySQL. Pada minggu keempat sampai dengan minggu kesembilan mahasiswa mulai membuat fungsi-fungsi yang akan digunakan dalam proyek ini.
Kemudian pada minggu kesepuluh mahasiswa sudah mulai melakukan percobaan dan perbaikan terhadap fungsi-fungsi yang telah dibuat pada minggu-minggu sebelumnya.
3.3.3 Perancangan Sistem
A. Diagram Alir Data (DFD)
Diagram alir data adalah adalah suatu diagram yang menggambarkan aliran data dari sebuah proses atau sistem. Gambar 3.1 Menunjukan diagram alir data yang digunakan dari aplikasi MESS ini.
Gambar 3.1 merupakan gambaran kesuruhan alur data aplikasi. Dari Gambar 3.1 dapat dijabarkan secara lebih detail pada diagram alur data level 1 yang terdapat pada gambar 3.2.
Gambar 3.1 Diagram Konteks MESS
10 Gambar 3.2 Diagram Alur Data Level 1
11 B. Flowchart
Flowchart menggambarkan urutan logika dari suatu prosedur pemecahan masalah, sehingga flowchart merupakan langkah-langkah penyelesaian masalah yang dituliskan dalam simbol-simbol tertentu.
Flowchart ini akan menunjukan alur di dalam program secara logika (Sitorus, 2015). Berikut merupakan flowchart yang digunakan dalam proyek ini.
Gambar 3.3 menunjukan keseluruhan alur website MESS. Pada awal alur, akan muncul tampilan halaman login. Kemudian pengguna website dapat memilih untuk melakukan login atau tidak. Jika pengguna melakukan login, pengguna harus melakukan pengisian username dan password, kemudian sistem akan melakukan validasi terhadap input yang dimasukan oleh pengguna. Jika login berhasil maka akan dilakukan pengecekan kembali terhadap username yang dimasukan, apakah username tersebut username pegawai atau admin. Apabila login gagal maka akan kembali ke halaman login. Jika username yang dimasukan adalah admin maka sistem akan memunculkan halaman dashboard admin jika bukan maka akan memunculkan halaman dashboard pegawai. Kemudian Jika pada login pengguna tidak memilih login maka dapat melakukan register, yang akan
Gambar 3.3 Flowchart Website MESS
12 membawa pengguna menuju halaman register. Pada halaman register pengguna diminta memasukan input seperti nama, username, divisi, password dan confirm password. Apabila register gagal maka akan kembali ke halaman register, dan jika register berhasil maka pengguna akan ke halaman dashboard pegawai.
Gambar 3.4 Flowchart Halaman Dashboard Admin
13 Gambar 3.4 menunjukan alur saat halaman dashboard admin diakses. Pada saat halaman ini diakses pertamakali maka akan keluar popup modal tanggal yang berfungsi untuk menentukan penjualan pada tanggal yang dimasukan pada popup modal. Jika popup modal ditutup maka pengguna akan diminta untuk memasukan kembali tanggal. Kemudian jika tanggal berhasil dimasukan maka akan muncul tabel data penjualan berdasarkan tanggal yang dimasukan, kemudian pengguna dapat melakukan logout, jika pengguna tidak melakukan logout terdapat beberapa pilihan pada halaman ini yaitu pindah ke halaman target, detail pada tabel data dan export excel.
Gambar 3.5 Flowchart Halaman target
14 Pada Gambar 3.5 menunjukan alur proses dari halaman target. Pada halaman target pengguna dapat melakukan beberapa pilihan diantaranya yaitu logout, tambah produk, hapus produk dan detail/edit. Jika pengguna memilih tambah produk, hapus produk dan detail/edit maka akan muncul popup modal yang sesuai dengan pilihan pengguna pilih.
Gambar 3.6 menunjukan alur dari halaman dashboard pegawai.
Pada halaman dashboard pegawai pengguna dapat melakukan beberapa pilihan diantaranya yaitu logout, tambah penjualan, edit penjualan dan hapus penjualan. Jika pengguna memilih tambah penjualan, edit penjualan dan hapus penjualan maka akan muncul popup modal yang sesuai dengan pilihan pengguna pilih.
Gambar 3.6 Flowchart Halaman Dashboard Pegawai
15 C. Relasi Antar Tabel
Relasi antar tabel adalah suatu bentuk diagram yang menjelaskan hubungan antar objek-objek data yang mempunyai hubungan antar relasi.
Gambar 3.7 menunjukan relasi antar tabel dari aplikasi MESS ini.
D. Struktur Tabel
Sistem MESS menggunakan database MySQL. Berikut adalah struktur tabel- tabel database yang digunakan di sistem tersebut.
Tabel : user
Fungsi : Menyimpan data pegawai yang dimasukan pada halaman register dan login ke sistem MESS.
Gambar 3.7 Relasi Antar Tabel MESS
16 Tabel 3.2 Tabel User
Nama Kolom Tipe Data Panjang Keterangan id Interger 20 ID yang dihasilkan dari
register
name Varchar 255 Nama Pegawai
password Varchar 255 Password Pegawai
username Varchar 255 username Pegawai
divisi_id Interger 20 Divisi pegawai
created_at Timestamp Waktu pembuatan akun pegawai
updated_at Timestamp Waktu update data akun pegawai
Tabel : divisi
Fungsi : Menyimpan data divisi.
Tabel 3.3 Tabel Divisi
Nama Kolom Tipe Data Panjang Keterangan
divisi_id Interger 20 ID divisi
name Varchar 255 Nama divisi
Tabel : kategori
Fungsi : Menyimpan data kategori dari produk.
Tabel 3.4 Tabel Kategori
Nama Kolom Tipe Data Panjang Keterangan
kategori_id Interger 20 ID kategori
name Varchar 255 Nama kategori
Tabel : produk
Fungsi : Menyimpan data produk yang dimasukan dari halaman tambah produk.
17 Tabel 3.5 Tabel Produk
Nama Kolom Tipe Data Panjang Keterangan
produk_id Interger 20 ID produk
name Varchar 255 Nama kategori
kategori_id Interger 20 ID kategori
created_at Timestamp Waktu pembuatan data produk updated_at Timestamp Waktu update data produk
Tabel : penjualan
Fungsi : Menyimpan data penjualan yang dimasukan dari halaman pegawai.
Tabel 3.6 Tabel Penjualan
Nama Kolom Tipe Data Panjang Keterangan
produk_id Interger 20 ID produk
name Varchar 255 Nama kategori
kategori_id Interger 20 ID kategori
penjualan_jumlah float Jumlah penjualan
keterangan Varchar 255
created_at Timestamp Waktu pembuatan data penjualan
updated_at Timestamp Waktu update data penjualan pegawai
Tabel : target
Fungsi : Menyimpan data target yang dimasukan dari halaman tambah produk
18
Tabel 3.7 Tabel Target
Nama Kolom Tipe Data Panjang Keterangan
target_id Interger 20 ID target
target Float Nama kategori
produk_id Interger 20 ID produk
divisi_id Interger 20 ID divisi
created_at Timestamp Waktu pembuatan data target updated_at Timestamp Waktu update data target
E. Desain Antarmuka
Desain antarmuka untuk aplikasi MESS ini dibuat dengan tampilan yang sederhana sehingga memudahkan penggunaan aplikasi tersebut.
Aplikasi ini memiliki beberapa desain diantaranya yaitu desain halaman login, desain halaman register, desain halaman dashboard admin, desain halaman dashboard pegawai dan desain halaman target. Desain antarmuka halaman login dapat dilihat pada gambar 3.8.
Gambar 3.8 Desain Antarmuka Halaman Login
19 Gambar 3.8 menunjukan desain antarmuka untuk halaman login.
pada saat website MESS diakses yang berfungsi untuk melakukan login.
Gambar 3.9 menunjukan desain antarmuka untuk halaman register yang berfungsi untuk melakukan pendaftaran akun pegawai yang belum terdaftar.
Gambar 3.9 Desain Antarmuka Halaman Register
Gambar 3.10 Desain Antarmuka Halaman Dashboard Admin
20 Gambar 3.10 menunjukan desain antarmuka untuk halaman dashboard admin yang berfungsi untuk melihat daftar penjualan seluruh pegawai dan untuk melakukan export data tersebut kedalam bentuk excel.
Gambar 3.11 menunjukan desain antarmuka untuk halaman target yang hanya diakses oleh admin, yang berfungsi untuk melakukan penambahan produk, penghapusan produk dan pengeditan target setiap divis terhadap produk.
Gambar 3.11 Desain Antarmuka Halaman Target
21 Gambar 3.12 menunjukan desain antarmuka untuk halaman Dashboard Pegawai yang berfungsi untuk melakukan penambahan, penghapusan dan pengeditan penjualan dari pengguna.
3.3.4 Hasil Implementasi
Dari hasil implentasi, website MESS memiliki dua bagian pengguna yaitu bagian admin dan bagian pegawai. Berikut merupakan halaman-halaman dari hasil implementasi website MESS.
A. Halaman Login
Halaman login adalah tampilan pertama saat website ini dijalankan, pengguna perlu melakukan login atau melanjutkan ke halaman register untuk menggunakan website ini. Pada halaman ini terdapat dua tombol navigasi pada bagian kanan atas halaman, logo perusahaan, kolom input username, kolom input password dan tombol login. Pengguna dapat melakukan login dengan cara memasukan username dan password yang sudah valid atau sudah terdaftar pada database. Ketika username dan password sudah valid maka akan dilakukan kembali pengecekan username.
Gambar 3.12 Desain Antarmuka Halaman Dashboard Pegawai
22 Apabila username adalah admin maka akan diarahkan pada halaman dashboard admin, dan jika bukan admin maka akan diarahkan pada halaman dashboard pegawai. Halaman login dapat dilihat pada gambar 3.13.
B. Halaman Register
Halaman Register berfungsi untuk mendaftarkan pengguna kedalam website MESS ini. Pada halaman ini terdapat kolom input nama, username, divisi, password, confirm password, tombol registrasi dan tombol kembali ke halaman login. Pengguna dapat melakukan registrasi dengan melakukan pengisian pada kolom input nama, username, divisi, password, confirm password. Apabila terjadi kesalahan pada saat registrasi maka akan diarahkan kembali pada halaman ini. Ketika registrasi berhasil dilakukan maka pengguna akan diarahkan ke halaman dashboard pegawai. Halaman register dapat dilihat pada gambar 3.14.
Gambar 3.13 Halaman Login
23 C. Halaman Dashboard Admin
Halaman dashboard admin berfungsi untuk menapilkan semua data penjualan seluruh pegawai yang mana berguna untuk monitoring data penjualan pegawai. Ketika halaman ini pertama kali diakses maka akan memunculkan popup modal tanggal yang berfungsi untuk memfilter data penjualan yang akan dimunculkan pada halaman ini, seperti yang dapat dilihat pada gambar 3.15. Apabila pengguna tidak mengisi tanggal pada popup modal atau data tidak tersedia pada tanggal tersebut, maka akan akan diminta untuk mengisi tanggal kembali, seperti yang dapat dilihat pada gambar 3.16 dan gambar 3.17. Pada saat data yang difilter tersedia, maka akan menampilkan tabel nama seluruh pegawai, tombol detail pada setiap nama pegawai, tombol export excel, tombol navigasi logout dan terdapat tombol navigasi ke halaman target. Export excel berfungsi untuk mengekspor data penjualan kedalam benduk excel. Halaman dashboard admin dapat dilihat pada gambar 3.18.
Gambar 3.14 Halaman Register
24 Gambar 3.15 Popup Modal Tanggal Halaman Dashboard Admin
Gambar 3.16 Halaman Dashboard Admin Jika Tidak Mengisi Tanggal
25 Gambar 3.17 Halaman Dashboard Admin Jika Data Tidak Tersedia
Gambar 3.18 Halaman Dashboard Admin
26 D. Halaman Detail Penjualan Pegawai
Halaman detail penjualan pegawai berfungsi untuk menapilkan data penjualan pegawai sesuai dengan tanggal yang dimasukan pada saat mengakses halaman dashboard admin. Pada halaman ini terdapat tabel data penjualan dan tombol tutup. Halaman detail penjualan pegawai dapat dilihat pada gambar 3.19 dan 3.20.
Gambar 3.19 Halaman Detail Penjualan Pegawai 1
27 E. Halaman Target
Halaman target hanya dapat diakses oleh admin. Pada halaman ini terdapat tombol detail/edit yang berfungsi untuk mengubah target penjualan bulanan yang harus dicapai setiap bulannya, tambah produk, hapus produk dan terdapat navigasi untuk logout. Halaman target dapat dilihat pada gambar 3.21
Gambar 3.20 Halaman Detail Penjualan Pegawai 2
28 F. Halaman Tambah Produk
Halaman tambah produk berfungsi untuk menambahkan produk kedalam target bulanan pegawai. Pada halaman tambah produk terdapat kolom input nama produk, kategori, target untuk setiap divisi, tombol simpan dan batal. Seperti yang dapat dilihat pada gambar 3.22 dan gambar 3.23. Apabila tambah produk berhasil dilakukan maka akan muncul kalimat yang mengatakan produk berhasil ditambahkan. Seperti yang dapat dilihat pada gambar 3.24.
Gambar 3.21 Halaman Target
29 Gambar 3.22 Halaman Tambah Produk 1
Gambar 3.23 Halaman Tambah Produk 2
30 G. Halaman Hapus Produk
Halaman Hapus Produk berfungsi untuk menghapus produk dan target dari produk. Pada halaman hapus produk terdapat kolom pilihan nama produk, tombol batal dan hapus. Seperti yang dapat dilihat pada gambar 3.25. Apabila data produk berhasil dihapus maka akan muncul kalimat yang mengatakan produk berhasil dihapus. Seperti yang dapat dilihat pada gambar 3.26.
Gambar 3.24 Halaman Tambah Produk Berhasil
31 Gambar 3.25 Halaman Hapus Produk
Gambar 3.26 Halaman Hapus Produk Berhasil
32 H. Halaman Detail/Edit
Halaman detail/edit berfungsi untuk menapilkan dan mengubah data target penjualan semua produk dari satu divisi secara bersamaan. Pada halaman detail/edit terdapat kolom target produk, tombol batal dan simpan.
Seperti yang dapat dilihat pada gambar 3.27 dan gambar 3.28. Apabila data target telah berhasil diubah maka akan muncul kalimat target divisi telah berhasil diperbarui. Seperti yang dapat dilihat pada gambar 3.29.
Gambar 3.27 Halaman Detail/Edit 1
33 Gambar 3.28 Halaman Detail/Edit 2
Gambar 3.29 Halaman Detail/Edit Berhasil
34 I. Halaman Dashboard Pegawai
Halaman dashboard pegawai berfungsi untuk menampilkan seluruh data penjualan pegawai dan mengubah data tersebut. Pada halaman dashboard pegawai terdapat tombol tambah penjualan, edit dan hapus.
Seperti yang dapat dilihat pada gambar 3.30.
J. Halaman Tambah Penjualan
Halaman tambah penjualan berfungsi untuk menambahkan data penjualan pegawai. Pada halaman tambah penjualan terdapat kolom input pilihan nama produk, jumlah, keterangan, tombol batal dan simpan. Seperti yang dapat dilihat pada gambar 3.31. Apabila penjualan berhasil data ditambahkan maka akan muncul kalimat nama produk berhasil ditambahkan. Seperti yang dapat dilihat pada gambar 3.32.
Gambar 3.30 Halaman Dashboard Pegawai
35 Gambar 3.31 Halaman Tambah Penjualan
Gambar 3.32 Halaman Tambah Penjualan Berhasil
36 K. Halaman Edit Penjualan
Halaman edit penjualan berfungsi untuk mengubah data penjualan pegawai. Pada halaman edit penjualan terdapat kolom input pilihan nama produk, jumlah, keterangan, tombol batal dan simpan. Seperti yang dapat dilihat pada gambar 3.33. Apabila penjualan berhasil data diubah maka akan muncul kalimat nama produk berhasil diperbarui. Seperti yang dapat dilihat pada gambar 3.34.
Gambar 3.33 Halaman Edit Penjualan
37 L. Halaman Hapus Penjualan
Halaman hapus penjualan berfungsi untuk menghapus data penjualan pegawai. Pada halaman terdapat konfirmasi penghapusan data penjualan, tombol batal dan hapus. Seperti yang dapat dilihat pada gambar 3.35. Apabila data berhasil dihapus maka akan muncul kalimat penjualan dengan nama produk berhasil dihapus. Seperti yang dapat dilihat pada gambar 3.36.
Gambar 3.34 Halaman Edit Penjualan Berhasil
38 Gambar 3.35 Halaman Hapus Penjualan
Gambar 3.36 Halaman Hapus Penjualan Berhasil
39 M. Hasil Export Data ke Excel
Hasil dari export data penjualan seluruh pegawai akan berbentuk file excel dengan format Comma Separated Value (CSV). Data yang diambil yaitu nama pegawai, nama produk, jumlah, keterangan dan tanggal transaksi. Seperti yang dapat dilihat pada gambar 3.37.
N. Fitur Anti SQL Injection
Framework Laravel menggunakan suatu plugin PHP Data Object (PDO) parameter binding dengan tujuan untuk mencegah serangan SQL Injection (Laravel, 2011-2021). PDO parameter binding adalah fungsi inbuilt PHP yang digunakan mengikat parameter ke nama variabel yang ditentukan pada statement sql untuk mengakses data di dalam database dengan cara memetakan variabel ke value dalam PHP data objects statement yang biasa dikenal sebagai PDOStatement yang biasa disebut dengan abstaksi untuk database queries. Berikut salah satu cara penggunaan plugin PDO parameter binding yang digunakan pengguna untuk melakukan registrasi pada aplikasi ini. Seperti yang dapat dilihat pada gambar 3.38.
Gambar 3.37 Hasil Export Data ke Excel
40 3.3.5 Kendala
Kendala yang ditemukan selama pelaksanaan kerja magang di PT. Bank Mandiri cabang Singkawang adalah sebagai berikut:
- Requirement yang kurang jelas dan terdapat banyaknya tambahan terhadap requirement yang sebelumnya sudah diberikan.
- Perangkat komputer yang dapat digunakan untuk melakukan testing di tempat kerja magang hanya satu unit, sehingga menyebabkan sulitnya melakukan testing aplikasi dengan kondisi langsung dilapangan.
- Pengalaman yang kurang dalam segi desain dan konsep antarmuka sehingga menyebabkan terhambatnya pengerjaan proyek yang diberikan.
3.3.6 Solusi
Kendala yang dihadapi oleh mahasiswa selama melakukan kerja magang di PT. Bank Mandiri cabang Singkawang tidak menghalangi mahasiswa dalam menemukan solusi dari kendala tersebut. Berikut merupakan solusi untuk mengatasi kendala-kendala tersebut:
- Berkonsultasi secara rutin dengan pembimbing lapangan untuk menanyakan requirements yang kurang jelas dan tambahan requirement yang baru
Gambar 3.38 PDO Parameter Binding
41 ditambahkan.
- Melakukan hosting sementara pada aplikasi dan meminta empat orang pegawai untuk melakukan testing aplikasi menggunakan perangkat smartphone mereka.
- Mencari referensi dari internet terkait desain dan konsep perancangan antarmuka yang sesuai untuk proyek yang dibuat dan meminta masukan dari beberapa pegawai di tempat kerja magang.
