BAB 3 PELAKSANAAN KERJA MAGANG

8 BAB 3

PELAKSANAAN KERJA MAGANG

3.1 Kedudukan dan Koordinasi

Dalam pelaksanaan kerja magang di PT. Mega Central Finance, penulis memegang jabatan sebagai IT Development Staff yang di supervisi secara langsung oleh Bapak Antonius Pungkas, selaku Remuneration dan OD Division di PT. Mega Central Finance.

Bapak Pungkas berperan dalam memberikan informasi, membimbing serta mengawasi pengerjaan pembangunan sistem internal perusahaan. Selain itu, penulis diberikan arahan terkait software, framework, dan database yang digunakan serta kendala yang terjadi oleh Bapak Denny, selaku IT Operational Excellence di PT. Mega Central Finance. Selama pengerjaan proyek tersebut, penulis bekerja sama dalam satu tim dengan anggota tim magang lainnya yang memegang jabatan sebagai IT Development Staff. Koordinasi antar anggota dilakukan secara langsung di kantor dan di tempat kos penulis. Ketika bekerja secara remote, penulis bersama anggota lainnya menggunakan aplikasi Line sebagai media komunikasi pertukaran ide dan aplikasi Zoom untuk berdiskusi dengan Bapak Pungkas dan Bapak Denny terkait kendala yang dihadapi.

3.2 Tugas yang Dilakukan

Selama pelaksanaan kerja magang, tanggung jawab yang diberikan adalah sebagai berikut:

● Membuat Data Flow Diagram dan Use Case Diagram sebagai acuan perancangan sistem yang akan dibuat.

● Menyusun database beserta data tabel yang akan digunakan dalam pembuatan sistem.

● Membuat tampilan antarmuka sesuai dengan halaman yang dikerjakan.

● Membuat halaman Login, Home, dan Details untuk front-end dan back-end.

9

● Membuat halaman SendProtocol untuk front-end dengan bantuan anggota tim lainnya.

● Melakukan testing and debugging terhadap sistem yang dibuat.

● Berkolaborasi dengan anggota tim lainnya untuk menemukan metode terbaik untuk menyelesaikan masalah dalam sistem.

3.3 Uraian Pelaksanaan

Pada minggu pertama magang dilaksanakan, Bapak Pungkas melakukan briefing dengan menjelaskan requirement yang diperlukan untuk proyek yang akan dikerjakan. Di minggu yang sama, melakukan instalasi software yang digunakan dan mulai fokus untuk merancang Data Flow Diagram (DFD) dan Use Case Diagram tentang alur pengiriman e- mail pada sistem yang dibuat. Tools dan requirement terkait pembuatan sistem, disesuaikan dengan milik perusahaan. Di minggu kedua, tugas yang dilakukan adalah melakukan pembelajaran dan adaptasi terhadap software, language, database dan framework yang digunakan.

Framework yang digunakan bernama ASP .NET yang memiliki eksistensi .aspx dan

dikombinasikan dengan bahasa pemograman C#. ASP merupakan framework

pengembangan untuk membangun halaman web. ASP dan ASP.NET adalah teknologi sisi

server (W3schools, 2020). Kedua teknologi tersebut memungkinkan kode komputer

dijalankan oleh server Internet. Ketika browser meminta file ASP atau ASP.NET, mesin

ASP membaca file, menjalankan kode apa pun di file, dan mengembalikan hasilnya ke

browser (W3schools, 2020). Pelaksanaan kerja magang dilaksanakan selama kurang lebih

3 (tiga) bulan atau 12 (dua belas) minggu dengan timeline kerja pada Tabel 3.1 sebagai

berikut.

10 Pada minggu ketiga, dilakukan instalasi software yang disesuaikan dengan perusahaan. Lalu, mulai melakukan coding front-end dimulai dari membuat homepage dan database. Di minggu keempat dan kelima, dilakukan pengerjaan back-end dimulai dari halaman Login dan Home serta mencari prosedur untuk melakukan trigger otomatisasi pengiriman e-mail bersama anggota lainnya. Di minggu keenam, penulis melakukan passing value dan read data yang digunakan.

Di minggu ketujuh dan kedelapan, penulis bersama anggota lainnya melakukan penyesuaian front-end dan environtment terhadap sistem web yang dibuat. Di minggu kesembilan, penulis bersama anggota lainnya melakukan research kapabilitas sistem dan melakukan penyesuaian sistem seperti fitur, database, dan sebagainya pada minggu ke sepuluh. Di minggu kesebelas hingga keduabelas, melakukan pre-testing, testing dan debugging terhadap sistem web yang memiliki kendala atau bug beserta penangannya hingga finishing project pengiriman e-mail otomatis ini berakhir di minggu ketigabelas.

3.4 Perancangan Sistem

Setelah dilakukan penguraian terhadap proses pelaksanaan kerja magang, disusunlah perancangan sistem sesuai dengan kebutuhan yang diperlukan. Kebutuhan tersebut dimulai dari perancangan diagram site map tentang alur sistem yang dibuat. Setelah itu, dilanjutkan untuk merancang flowchart terkait cara kerja sistem saat dilakukan pengiriman e-mail secara otomatis. Lalu, disusun juga DFD dan Database skema untuk merancang siklus

Tabel 3.1 Timeline Kerja Magang

11 jalannya data-data perusahaan. Kemudian, dibuat tampilan antarmuka yang berisi 5 halaman utama dari pembuatan sistem web.

3.4.1 Diagram Site Map

Diagram site map merupakan perancangan alur kerja dari sistem web yang telah dibuat. Melalui diagram ini, alur tata cara penggunaan sistem lebih mudah terlihat dan mudah di pahami. Pembangunan sistem web ini dimulai dari front-end halaman Login hingga halaman Customize serta halaman back-end yang direpresentasikan melalui Data Flow Diagram (DFD). Berikut ini merupakan diagram site map dari sistem otomatisasi e- mail yang telah dibuat:

Gambar 3.1 Diagram Site Map

12 Gambar 3.2 DFD Context Diagram

3.4.2 Data Flow Diagram (DFD)

Proses alur kerja sistem pengiriman e-mail diawali dengan tiga aktor utama, yaitu

Admin, Kepala Cabang dan Karyawan. Admin dihimbau agar dapat menjalankan

pengiriman surat yang diperlukan melalui sistem dan juga dapat menerima surat yang

dikirim sebelumnya. Kepala Cabang melakukan pengecekan data karyawan dan menerima

informasi terkait surat-surat yang dikirimkan agar dapat disesuaikan dengan data riwayat

karyawan. Seorang karyawan hanya dapat menerima informasi tentang surat kontrak,

peringatan hingga teguran melalui e-mail yang dikirim dari sistem yang dibuat. Interaksi

yang dilakukan oleh aktor dengan sistem dapat dilihat pada Gambar 3.2 sebagai berikut.

13 Pada Gambar 3.3 yang berisi tentang DFD level 0 di bawah ini, dibuat alur kerja dimulai dari Admin yang mengirim surat kontrak dan surat peringatan ke Kepala Cabang dan Karyawan. Admin mengambil data karyawan melalui ID karyawan yang disimpan pada database. Proses yang dilakukan dibedakan menjadi 2, yaitu proses pengiriman surat kontrak dan proses pengiriman surat peringatan.

Setelah membuat DFD level 0, dilanjutkan dengan membuat DFD level 1 yang berisi tentang alur proses pengiriman surat kontrak karyawan. Di diagram ini menjelaskan tentang alur kerja dari Admin yang melakukan penerbitan seperti membuat format dan isi pada surat. Setelah itu, admin mengirim surat kontrak ke karyawan hingga ke kepala cabang. Jika terjadi perubahan pada surat kontrak dari evaluasi kepala cabang, admin dapat menerbitkan surat yang baru di update. Kemudian, hasil keputusan diteruskan kembali ke kepala cabang dan ke karyawan. Admin selalu melakukan penyimpanan data yang diterbitkan dan di update ke database agar dapat merekam riwayat yang telah dilakukan.

DFD level 1 tentang surat kontrak karyawan dapat dilihat pada Gambar 3.4 sebagai berikut.

Gambar 3.3 DFD Level 0

14 Pembuatan DFD level 1 berisi tentang alur proses pengiriman surat peringatan dimulai dari kepala cabang yang dapat mengevaluasi kinerja para karyawan sehingga jika ada karyawan yang melanggar peraturan perusahaan atau kinerja nya kurang baik maka akan melakukan request surat peringatan ke admin. Admin melakukan penerbitan surat dengan mengambil data karyawan yang ada. Lalu, admin mengirim surat peringatan ke karyawan dan kepala cabang agar dapat mengetahui riwayat kinerja yang dilakukan pekerja perusahaan. DFD level 1 tentang surat peringatan karyawan dapat dilihat pada Gambar 3.5 ebagai berikut.

Gambar 3.4 DFD Level 1: Surat Kontrak Karyawan

15

Pembuatan Data Flow Diagram (DFD) dari DFD Context Diagram hingga DFD level 1 dikerjakan oleh penulis bersama anggota lainnya. DFD ini dibuat saat pertama kali ingin merancang sistem yang dibuat sehingga hanya bersifat sementara sebagai gambaran kasar. DFD yang dibuat ini mengikuti arahan dari Bapak Pungkas dan sudah disetujui.

Setelah DFD, pekerjaan yang dilakukan adalah merancang isi dari database yang dapat dilihat pada bagian Skema Database.

Gambar 3.5 DFD Level 1: Surat Peringatan Karyawan

16 3.4.3 Flowchart

Perancangan alur kerja sistem untuk setiap halaman direpresentasikan melalui flowchart. Pada saat praktik kerja magang berlangsung, sesuai dengan bagian yang dikerjakan hanya menyertakan 3 halaman. Beberapa halaman yang telah dibuat memiliki flowchart tersendiri. Jumlah halaman yang dikerjakan terbatas karena penulis bekerja sama dengan anggota tim lainnya yang berjumlah 2 orang. Tiga halaman yang akan dijabarkan pada bagian ini, yaitu Login, Home dan Details.

A. Halaman Login

Halaman Login dirancang sederhana untuk memudahkan Admin sebagai user.

Halaman ini menampilkan login form yang terdiri dari input fields untuk memasukkan username dan password yang sudah ditentukan di dalam database perusahaan. Saat user melakukan sign in, maka sistem akan mengecek apakah data yang dimasukkan sudah sesuai atau belum dengan yang telah ditentukan. Jika belum sesuai, maka sistem akan menampilkan error message berupa “Username or password doesn’t match”. Lalu, user dihimbau untuk kembali mengisi login form dengan memasukkan username dan password dengan benar. Jika sudah sesuai, maka user akan di arahkan menuju halaman Home.

Gambar 3.6 Flowchart Halaman Login

17 B. Halaman Home

Halaman Home menampilkan seluruh tabel data dalam bentuk card untuk surat kontrak karyawan, surat peringatan, surat teguran dan kendala pengiriman. Card pada halaman ini dapat dibuka dan ditutup sesuai dengan tampilan antarmuka. Ketika card surat kontrak karyawan dibuka, akan berisi section button sesuai jangka waktu yang telah ditetapkan. Ketika card surat peringatan dibuka, akan berisi section button sesuai pelanggaran yang dilanggar karyawan.

Gambar 3.7 Flowchart Halaman Home

18 Jika user membuka card tabel surat kontrak karyawan, maka sistem akan menampilkan section button berisi data karyawan yang sudah dikirim e-mail dalam jangka waktu 2 bulan, 1 bulan, 2 minggu dan 1 minggu dari waktu masa habis kontrak. Jika data tersedia pada section tersebut, maka data akan ditampilkan disertai button Details yang ketika ditekan akan dialihkan menuju halaman Details. Jika data tidak tersedia atau kosong, maka sebaliknya user dapat mengecek data mana yang tersedia dengan membuka urutan section button sesuai dengan kebutuhan.

Jika user membuka card tabel surat peringatan, maka sistem akan menampilkan section button berisi data karyawan yang mendapat pelanggaran berupa SPI, SPII dan SPIII. Jika data tersedia pada section tersebut, maka data akan ditampilkan disertai button Details yang ketika ditekan akan dialihkan menuju halaman Details. Jika data tidak tersedia atau kosong, maka sebaliknya user dapat mengecek data mana yang tersedia dengan membuka section button sesuai dengan kebutuhan.

Surat teguran dirancang untuk pelanggaran ringan yang dilakukan seorang karyawan.

Dalam sistem, surat teguran dibuat menyerupai surat peringatan dengan core back-end yang diatur menjadi SPIV untuk surat teguran dalam tabel data karyawan atas arahan dari Bapak Pungkas. Card kendala pengiriman menampilkan data error yang diambil dari tabel error pada database yang terjadi saat pengiriman e-mail gagal dilakukan. Kendala pengiriman juga tidak disertai dengan halaman Details.

C. Halaman Details

Halaman ini menampilkan data yang telah diambil dari tabel surat pada database.

Saat membuka halaman Details terkait karyawan yang telah mendapat surat kontrak

karyawan, peringatan serta teguran, user dapat mengecek terkait isi dari e-mail yang

berhasil dikirim. Isi e-mail dapat meliputi ID Surat, subject, receiver, sender, waktu

pengiriman, durasi, body mail, dan attachment. Jika user ingin melihat dan membuka file

attachment yang dikirimkan, dapat mengunduh file tersebut melalui halaman ini. Gambar

3.8 merupakan flowchart halaman Details.

19 3.4.4 Skema Database

Penyimpanan data dilakukan pada database yang disesuaikan dengan data dummy perusahaan. Database yang digunakan saat melakukan praktik kerja magang adalah project_mcf. Pembuatan skema database menggunakan website online bernama dbdiagram.io. Gambar 3.5 merupakan skema database yang terdiri dari relasi antar tabel yang telah dibuat.

Gambar 3.8 Flowchart Halaman Details

20 Di dalam database dengan nama project_mcf, terdapat 4 tabel utama yang digunakan untuk keperluan testing aplikasi. Lalu, dikarenakan database yang digunakan mengikuti kebutuhan perusahaan sehingga masih dengan versi lama, untuk tabel user terdiri dari username dan password untuk admin yang sudah di setting. Terdapat tabel MsKaryawan yang berisi informasi pribadi dari para pekerja. Terakhir, terdapat tabel TWarning yang berisi riwayat karyawan yang pernah mendapat surat pelanggaran selama bekerja di perusahaan.

Gambar 3.9 Skema Database: project_mcf

21 3.4.5 Tampilan Antarmuka

Perancangan tampilan antarmuka dibuat oleh penulis menggunakan desain tools Figma yang dilakukan dengan terhubung di internet. Tampilan antarmuka dibuat hanya 1 kali dikarenakan sebelumnya saat praktik kerja magang dilaksanakan, tidak melakukan desain UI pada sistem web yang dibuat. Maka, rancangan ini dibuat ketika sudah melaksanakan coding program dan bersifat sementara. Tampilan ini terdiri dari 5 halaman utama yang bisa dilihat dari Gambar 3.10 hingga Gambar 3.12 sebagai berikut.

A. Halaman Login

Halaman ini menampilkan login form yang terdiri dari 2 input fields, yaitu username dan password. Karena akses dari sistem web ini dipergunakan oleh seorang admin, maka penulis dan anggota lainnya tidak membuat halaman register akun. Admin bisa langsung melakukan sign in jika username dan password sudah terisi dengan benar. Setelah melakukan Login, admin akan dialihkan ke halaman utama atau Home. Tampilan halaman Login dapat dilihat pada Gambar 3.10 sebagai berikut.

Gambar 3.10 Tampilan Halaman Login

22 B. Halaman Home

Halaman ini menampilkan seluruh data karyawan terkait surat kontrak, peringatan dan teguran yang berhasil dikirim diselingi pesan laporan saat terjadi kendala pengiriman.

Surat kontrak karyawan dapat di urutkan sesuai masa waktu kirim seperti dilakukan pemberitahuan dengan mengirim e-mail kepada karyawan terkait kontrak yang akan habis dalam 2 bulan kedepan, 1 bulan kedepan, 2 minggu kedepan, hingga 1 minggu kedepan.

Surat peringatan dapat diurutkan menjadi SPI, SPII dan SPIII dengan menyimpan data karyawan mana saja yang pernah melakukan pelanggaran. Surat Teguran dirancang hanya terjadi pergantian format dari surat peringatan sehingga diatur dalam SPIV dalam surat peringatan. Terdapat tombol Logout di pojok kanan atas halaman Home sehingga ketika admin ingin keluar dari sistem web, akan dialihkan menuju halaman Login. Gambar 3.11 merupakan tampilan halaman Home.

Gambar 3.11 Tampilan Halaman Home

23 C. Halaman Details

Halaman ini berisi tentang rincian informasi atau riwayat kirim mengenai isi dari e- mail yang ingin dikirimkan. Terdapat ID surat, subject, receiver, sender, waktu kirim, durasi, mail body dan attachment. Riwayat kirim ini dibuat dengan sekat yang menjadi pembatas antara riwayat lainnya. Data yang dikirimkan akan disimpan di database.

Gambar 3.12 merupakan tampilan halaman Details.

Gambar 3.12 Tampilan Halaman Details

24 3.5 Hasil Implementasi

Rancangan core UI yang telah dibuat sebelumnya digunakan untuk menyusun layout pada halaman website. Maka, berdasarkan perancangan yang telah dibuat, berikut merupakan hasil implementasi dari 5 halaman yang telah disebutkan pada bagian tampilan antarmuka, meliputi halaman Login, Home, Form List, Details, dan Customize. Perlu diketahui hasil tampilan sementara masih menggunakan bootstrab dan seluruh gambar yang disertakan pada bagian ini merupakan hasil screenshot pada halaman browser. Data yang diisi pada halaman bersifat sementara karena masih menggunakan data dummy dari perusahaan.

A. Halaman Login

Halaman Login diimplementasikan sesuai dengan rancangan tampilan antarmuka.

Saat pertama kali menggunakan, pengguna diwajibkan untuk mengisi field untuk username dan password yang sudah di setting sebelumnya. Setelah login, pengguna akan dialihkan ke halaman Home. Implementasi halaman Login dapat dilihat pada Gambar 3.13 sebagai berikut.

Gambar 3.13 Hasil Implementasi Halaman Login

25 B. Halaman Home

Halaman Home diimplementasikan sesuai dengan perancangan tampilan antarmuka yang telah dijabarkan sebelumnya. Halaman ini menampilkan keseluruhan card yang berisi tentang data karyawan, details pengiriman hingga kendala saat tidak terjadi pengiriman.

Implementasi halaman Home dapat dilihat pada Gambar 3.14 sebagai berikut.

Hasil implementasi tetap yang dilakukan terdiri atas card dari surat kontrak karyawan, surat peringatan, surat teguran dan kendala pengiriman. Tampilan hasil implementasi dibuat sedemikian rupa mirip dengan tampilan antarmuka. Surat kontrak karyawan terdiri atas 4 button berupa 2 months, 1 month, 2 weeks, 1 week. Hal ini berarti pemberitahuan e-mail akan dilakukan ketika sebelum masa tersebut dikirim dari tanggal hari – H kontrak karyawan berakhir. Surat peringatan terdiri dari 3 button berupa 1, 2, 3.

Hal ini berarti saat button tersebut ditekan, akan menampilkan jenis dari surat peringatan

Gambar 3.14 Hasil Implementasi Halaman Home

26 seperti SPI, SPII, dan SPIII sehingga lebih mudah untuk melihat karyawan mana yang sudah mendapat jenis surat peringatan tersebut. Surat teguran dibuat sama dengan surat peringatan, yang membedakan didalam source code dibuat menjadi jenis SPIV yang berarti surat teguran. Kendala pengiriman berisi tentang error yang terjadi saat melakukan pengiriman.

C. Halaman Details

Halaman Form List diimplementasikan sesuai dengan perancangan tampilan antarmuka yang telah dijabarkan sebelumnya. Halaman ini berisi tentang rincian atau riwayat isi dari e-mail yang sudah berhasil dikirimkan. Terdapat penjelasan mengenai sender, receiver, waktu pengiriman, attachment, dan sebagainya. Implementasi halaman Details dapat dilihat pada Gambar 3.15 sebagai berikut.

Gambar 3.15 Hasil Implementasi Halaman Details

27 D. Otomatisasi pada Sistem

Sistem secara otomatis dapat di running menggunakan trigger dengan bantuan software Task Scheduler dari Windows. Trigger untuk waktu penjadwalan pengiriman e- mail dapat ditentukan sesuai keinginan di perusahaan. Cara kerja sistem otomatis ini dilakukan dengan mengakses sebuah link hosting dan disesuaikan dengan waktu penjadwalan yang sudah di tentukan. Pada Gambar 3.16 merupakan konfigurasi trigger oleh Task Scheduler.

Penggunaan trigger untuk sistem penjadwalan otomatis memerlukan sebuah Action sebagai acuan untuk menjalankan program yang dibuat. Pada suatu action yang ingin dibuat, memerlukan script dari program yang sudah dibuat. Script yang dibuat dijalankan dengan mengakses path lokasi browser yang digunakan untuk link hosting. Link hosting merupakan hasil hosting script dari program yang dibuat. Lalu, link tersebut dapat ditambahkan pada argumen di suatu action task. Setelah itu, sistem dapat dijalankan sesuai

Gambar 3.16 Konfigurasi Trigger Windows Task Scheduler

28 dengan perintah yang telah ditentukan secara otomatis. Pada Gambar 3.17 merupakan konfigurasi action oleh Task Scheduler.

E. Hasil Implementasi pada G-mail

Pengiriman e-mail membutuhkan Mail Transfer Protocol atau SMTP sebagai media untuk mengirim dan menerima e-mail agar lebih mudah dan cepat. Maka, pada saat membangun sistem otomatisasi e-mail ini, pengguna dapat mengatur SMTP apa yang digunakan. Penulis melakukan hasil uji coba pengiriman melalui SMTP Google Mail (G- mail) yang dapat dilihat pada Gambar 3.18 sebagai berikut.

Gambar 3.17 Konfigurasi Action Windows Task

Scheduler

29 Saat melakukan pengujian, penulis mengubah alamat e-mail Admin Cabang menjadi e-mail pribadi agar hasil pengujian dapat terlihat. E-mail yang sudah dikirim bisa dilihat pada halaman Details dan data disimpan pada database. Otomatisasi pada e-mail dilakukan di perusahaan secara langsung dengan menggunakan Task Scheduler dibantu dengan Pak Denny selaku IT Operational Excellence sebagai karyawan yang bertanggung jawab terhadap percobaan sistem yang sudah dibuat oleh penulis bersama anggota lainnya.

3.6 Potongan Kode

Berdasarkan hasil implementasi, potongan kode disesuaikan dengan menyertakan penggalan kode dari halaman yang telah dikerjakan. Potongan kode terdiri dari bagian tampilan, bagian fungsi-fungsi logic core dan bagian class dari halaman tersebut. Halaman yang dikerjakan meliputi halaman Login, Home dan Details.

Gambar 3.18 Hasil Implementasi pada G-mail

30 A. Halaman Login

Pada halaman ini, potongan kode yang disertakan berasal dari tampilan, fungsi-fungsi dan class pada sistem. Sistem yang dibuat berbasis web sehingga pada tampilan dibuat menyerupai situs website pada umumnya. Kode tampilan berisi input form untuk username dan password. Tampilan dibuat dengan rancangan yang terlihat sederhana agar mudah digunakan. Berikut ini merupakan potongan kode bagian tampilan pada halaman Login yang dapat dilihat pada Gambar 3.19.

Lalu, potongan kode untuk fungsi-fungsi pada halaman ini berada pada web form yang terpisah. Fungsi Page Load untuk memanggil fungsi yang berada dibawahnya. Fungsi login untuk menjalankan pengecekan terkait input username dan password yang dimasukkan user. Jika form login yang dimasukkan sudah sesuai atau benar, maka akan diarahkan menuju halaman Home. Jika form login yang dimasukkan belum sesuai atau salah, maka akan menampilkan error message seperti yang sudah pernah dijelaskan pada bagian flowchart. Gambar 3.20 merupakan potongan kode bagian fungsi halaman Login.

Gambar 3.19 Potongan Kode Bagian Tampilan Halaman Login

31 Pada class halaman Login digunakan untuk menampilkan data dari tabel database yang sudah ditentukan. Penentuan data dibuat dengan query yang sesuai isi dari tabel User.

Query yang dipakai dapat di periksa berjalan atau tidak melalui database. Username dan password pada tabel User menggunakan variable dengan nama +username+ dan +password+. Gambar 3.21 merupakan potongan kode bagian class pada halaman Login.

Gambar 3.20 Potongan Kode Bagian Fungsi Halaman Login

Gambar 3.21 Potongan Kode Bagian Class Halaman Login

32 B. Halaman Home

Pada halaman ini, potongan kode yang disertakan berasal dari tampilan, fungsi-fungsi dan class pada sistem. Namun, kode yang disertakan tidak menyeluruh karena banyaknya fungsi-fungsi yang terdapat pada halaman ini. Kode pada bagian tampilan terbagi untuk surat kontrak karyawan, surat peringatan dibuat sama dengan surat teguran dan kendala pengiriman. Seperti yang sudah dijelaskan sebelumnya, sebagian besar dari potongan kode banyak mengambil data dari database. Kode ini sesuai dengan perancangan sistem yang sudah dijelaskan pada bagian flowchart. Isi tabel pada surat kontrak karyawan dan surat peringatan mengambil data menggunakan variable %#Eval% seperti ID Surat, ID Employee, Nama Employee, Keterangan dan Waktu. Isi tabel pada kendala pengiriman menampilkan error dengan mengambil data seperti ID Error, ID Employee, Nama Employee dan Waktu. Gambar 3.22 sampai 3.24 merupakan potongan kode bagian tampilan pada halaman Home.

Gambar 3.22 Potongan Kode Bagian Tampilan Halaman Home

33 Gambar 3.23 Potongan Kode Bagian Tampilan Halaman Home (lanjutan)

Gambar 3.24 Potongan Kode Bagian Tampilan Halaman Home (lanjutan)

34 Penamaan web form selama praktik kerja magang untuk halaman Home disebut dengan nama Default. Pada halaman ini, terdapat fungsi surat kontrak, fungsi surat peringatan, fungsi surat teguran dan fungsi unsend table atau kendala pengiriman. Fungsi- fungsi ini menampilkan data tabel dari class halaman Default. Terdapat juga fungsi logout yang menghapus session ketika ingin keluar dari sistem serta pengarahan menuju halaman Login ketika berhasil logout. Gambar 3.25 merupakan potongan kode bagian fungsi pada halaman Home.

Pada class halaman Default berisi fungsi data tabel pada surat-surat hingga fungsi kendala pengiriman. Fungsi surat kontrak karyawan menggunakan query database yang mengambil data dari tabel Surat dengan kondisi tipe surat sama dengan 1. Fungsi surat peringatan dan surat teguran juga menggunakan query database dengan kondisi tipe surat

Gambar 3.25 Potongan Kode Bagian Fungsi

Halaman Home

35 sama dengan 2 dan 3. Fungsi kendala pengiriman dinamakan menjadi fungsi unsend data menggunakan query database dengan menampilkan load data dari tabel Error. Seluruh fungsi pada class ini menggunakan try-catch untuk menangani exception beserta kesalahan atau error yang mungkin terjadi. Gambar 3.26 merupakan potongan kode bagian class pada halaman Home.

C. Halaman Details

Pada halaman ini, potongan kode yang disertakan berasal dari tampilan, fungsi-fungsi dan class pada sistem. Tampilan pada halaman ini dibuat dengan menampilkan data-data terkait pengiriman e-mail yang sebelumnya sudah pernah dijelaskan pada bagian

Gambar 3.26 Potongan Kode Bagian Class Halaman Home

36 flowchart. Data yang ditampilkan ditarik melalui variable menggunakan %#Eval% yang ada pada tabel Surat di database. Data yang ditarik meliputi ID, Subject, Receiver, Sender, Time, Keterangan, Body Mail, dan Attachment. Pada bagian attachment, ketika terdapat lampiran file saat terjadi pengiriman e-mail, maka halaman ini akan menampilkan nama file dengan link agar bisa diunduh. Lalu, data file akan tersimpan ke dalam database menggunakan ID file sesuai urutan lampiran file. Data attachment menerapkan multiple value sehingga bisa banyak file yang dilampirkan saat pengiriman berlangsung. Berikut ini merupakan potongan kode tampilan halaman Login yang dapat dilihat pada Gambar 3.27.

Gambar 3.27 Potongan Kode Bagian Tampilan Halaman Details

37 Pada potongan kode dibawah ini, terdiri dari beberapa fungsi untuk menarik dan menampilkan data tersebut di halaman ini. Fungsi NameFill digunakan untuk menarik data nama karyawan dengan menggunakan query database. Fungsi AmbilData berperan untuk mengambil data dari jenis surat yang dikirimkan. Fungsi DownloadFile digunakan untuk mengambil data attachment dari database yang tersimpan pada tabel Files. Fungsi logout digunakan untuk keluar dari sistem dengan mengapus session terlebih dahulu dan dialihkan pada halaman Login setelah-nya. Fungsi RepeaterData digunakan untuk mengulang penampilan format data yang ditampilkan jika surat yang dikirim dalam jumlah banyak untuk 1 orang karyawan. Tampilan dapat dilihat pada implementasi sistem bagian halaman Details. Gambar 3.28 merupakan potongan kode bagian fungsi pada halaman Details.

Gambar 3.28 Potongan Kode Bagian Fungsi Halaman Details

38 Pada class halaman Details berisi fungsi yang didalamnya menggunakan query database pada tabel Surat. Query yang digunakan untuk mengambil data karyawan pada tabel Surat dimana ID karyawan dan tipe surat sudah dijelaskan pada bagian fungsi halaman Details. Fungsi AmbilData pada class ini menggunakan try-catch untuk menangani exception beserta kesalahan atau error yang mungkin terjadi. Gambar 3.29 merupakan potongan kode bagian class pada halaman Details.

3.7 Kendala yang Ditemukan

Dalam pembuatan sistem otomatisasi e-mail pada PT. Mega Central Finance terdapat beberapa kendala yang dialami, yaitu sebagai berikut:

1. Kebutuhan requirement dari client dengan sumber daya yang dimiliki masih kurang jelas.

2. Masalah inti dari pengembangan sistem yang dilakukan belum pasti.

3. Rancangan sistem yang cocok terkait dengan hal-hal yang telah diungkapkan oleh client belum ditetapkan.

4. Desain hanya pada bagian diagram atau proses alur kerja saja tidak untuk tampilan Core User Interface (UI).

Gambar 3.29 Potongan Kode Bagian Class Halaman Details

39 5. Tingkat kesalahan yang terjadi pada saat penetapan program belum teratasi

sempurna.

6. Tugas pekerjaan bersama anggota tim tidak dibagi sesuai role masing-masing.

3.8 Solusi Atas Kendala yang Ditemukan

Berdasarkan kendala dalam pembuatan sistem otomatisasi e-mail pada PT. Mega Central Finance maka solusi yang diusulkan, yaitu sebagai berikut:

1. Dengan melakukan observasi dan wawancara secara mendalam kepada pihak client, serta mengumpulkan informasi tentang sumber daya yang dimiliki.

2. Melihat sistem yang ada terlebih dahulu, kemudian menyesuaikan dengan masalah yang akan datang sehingga masalah inti dari pengembangan sistem yang dilakukan dapat segera diketahui.

3. Berdasarkan keinginan client, maka penetapan rancangan sistem yang dibuat adalah membuat Data Flow Diagram (DFD) dan Use Case Diagram.

4. Tampilan Core UI dapat dibuat menjadi rancangan Mockup sehingga lebih jelas output daripada sistem web yang dibangun.

5. Mengatasi tingkat kesalahan dengan melakukan pencarian identifikasi melalui software debugging dan jika ternyata error tersebut ternyata sulit untuk diidentifikasi maka dikonsultasikan kepada bagian IT Operational Excellence perusahaan.

6. Pembagian tugas developer pada umumnya dibagi menjadi tiga, yaitu Front-End,

Back-End dan Full-Stack. Berdasarkan ketiga jenis role tersebut, yang terjadi

pada saat kerja magang adalah bahwa pembagian tim hanya Full-Stack (tidak ada

kejelasan pembagian pekerjaan secara khusus) sehingga solusi yang ditawarkan

seharusnya adalah pihak perusahaan membaginya kedalam tiga role tersebut agar

memudahkan penyelesaian tugas kerja magang.