6 BAB III
PELAKSANAAN KERJA MAGANG
3.1 Kedudukan dan Koordinasi
Posisi yang diberikan dalam pelaksanaan Kerja Magang selama 55 hari kerja di PT Tridinamika Jaya Instrument adalah sebagai web developer pada divisi operasional / departemen logistik yang bertanggung jawab atas pengerjaan aplikasi web untuk membantu mengirim surel. Pengerjaan aplikasi ini dikoordinasikan Bapak Robby Muhdi selaku Head of HR & GA dan Ibu Indartik selaku Head of Purchase serta pembimbing lapangan. Tugas yang diberikan adalah membuat sebuah aplikasi web Notifikasi Konsumen untuk divisi operasional / departemen logistik PT Tridinamika Jaya Instrument. Pengerjaan aplikasi web ini dilakukan sesuai arahan yang diberikan oleh Ibu Indartik dan setiap minggu dilakukan report progress untuk mengevaluasi aplikasi yang telah dibuat. Jika terdapat bagian yang tidak sesuai, maka akan diperbaiki kemudian diperlihatkan pada report progress selanjutnya. Penempatan kedudukan dan koordinasi selama pelaksanaan Kerja Magang dapat dilihat pada Gambar 3.1.
Gambar 3.1 Bagan Kedudukan dan Koordinasi
7 Ibu Indartik merangkap sebagai Operational Assistant Manager dan Procurement Manager serta pembimbing lapangan Kerja Magang. Proses koordinasi dilakukan langsung kepada Ibu Indartik tanpa melalui staff lain.
3.2 Tugas yang Dilakukan
Pada saat awal diterima Kerja Magang di PT Tridinamika Jaya Instrument, tugas yang diberikan adalah membuat aplikasi Cuti Karyawan untuk divisi HR.
Setelah lima minggu kerja, tugas yang diberikan diganti menjadi aplikasi Notifikasi Konsumen karena lebih dibutuhkan sehingga aplikasi Cuti Karyawan tidak perlu dilanjutkan. Tugas yang dikerjakan dapat diuraikan sebagai berikut.
1. Membuat view aplikasi web
Membuat view aplikasi web bertujuan untuk membuat tampilan halaman Login, Satu Barang, Beda Leadtime, Barang Service, dan History Email. Beberapa tugas yang dikerjakan dalam pembuatan antarmuka program adalah sebagai berikut.
a. Membuat view Login dengan menggunakan framework CodeIgniter.
b. Membuat view Satu Barang dengan menggunakan framework CodeIgniter.
c. Membuat view Beda Lead Time dengan menggunakan framework CodeIgniter.
d. Membuat view Barang Service dengan menggunakan framework CodeIgniter.
e. Membuat view History Email dengan menggunakan framework CodeIgniter.
8 2. Membuat model aplikasi web
Membuat model aplikasi web bertujuan untuk mengelola database MySQL yang digunakan oleh aplikasi ini. Beberapa tugas yang dikerjakan dalam pembuatan model aplikasi web adalah sebagai berikut.
a. Membuat database tji_logistik.
b. Membuat query untuk digunakan aplikasi web.
3. Membuat controller aplikasi web.
Membuat controller aplikasi web bertujuan untuk menghubungkan model dan view serta berisi fungsi-fungsi untuk mengolah data. Beberapa tugas yang dikerjakan dalam pembuatan controller aplikasi web adalah sebagai berikut.
a. Membuat controller SatuBarang menggunakan framework CodeIgniter.
b. Membuat controller BedaLeadtime menggunakan framework CodeIgniter.
c. Membuat controller BarangService menggunakan framework CodeIgniter.
d. Membuat controller Email menggunakan framework CodeIgniter.
e. Membuat controller Login menggunakan framework CodeIgniter.
Selama Kerja Magang di PT Tridinamika Jaya Instrument berlangsung tugas-tugas yang dilakukan terdapat pada Tabel 3.1.
Tabel 3.1 Realisasi Kerja Magang
Minggu Tugas
1 - Mempelajari aplikasi Sleekr HR
- Brainstorming, cari konsep dan data-data yang diperlukan - Merancang desain prototype
2 - Merancang database Excel ke MySQL - Membuat page Login
- Mencari asset gambar 3 - Melanjutkan Login
- Mencari referensi
9 Tabel 3.1 Realisasi Kerja Magang (lanjutan)
Minggu Tugas
4 - Membuat page Dashboard - Mencari referensi
- Memperbaiki page Login 5 - Memperbaiki Login
- Memperbaiki database
6 - Ganti proyek dari HRD ke Logistik
- Mencari source yang diperlukan dan riset source
- Membuat database, controller Email, Login, dan tampilan 7 - Memperbaiki controller & view Login
- Memperbaiki view semua page - Report progress ke Ibu Iin
- Memperbaiki tampilan sesuai evaluasi report 8 - Melanjutkan page SatuBarang
- Membuat page History Email - Memperbaiki function yang error - Report progress ke Ibu Iin
9 - Melanjutkan proyek sampai selesai - Memperbaiki controller Email - Report progress ke Ibu Iin
10 - Melakukan hosting untuk keperluan testing - Merapikan source code
- Report progress ke Ibu Iin dan testing
11 - Mengubah tampilan page History Email sesuai evaluasi report - Membuat laporan magang
- Mengerjakan tugas kuliah - Report progress ke Ibu Iin 12 - Membuat laporan magang - Mengerjakan tugas kuliah
Pada minggu pertama, pengenalan rekan kerja dan melakukan rapat bersama Bapak Robby Muhdi tentang pembuatan aplikasi cuti karyawan.
Mempelajari aplikasi berbayar bernama Sleekr HR yang sebelumnya telah digunakan oleh karyawan PT Tridinamika Jaya Instrument untuk mengelola cuti kerja. Merancang desain antarmuka aplikasi cuti karyawan untuk diajukan ke Bapak Robby Muhdi. Pada minggu kedua dan ketiga, dilanjutkan perancangan database menggunakan MySQL. Kemudian, mencari asset gambar, CSS, JS, dan Bootstrap. Setelah itu, membuat model, view, dan controller Login.
10 Pada minggu keempat dan kelima, dilanjutkan perbaikan model dan controller Login. Kemudian, membuat page Dashboard. Pada minggu keenam, tugas yang awalnya membuat aplikasi cuti karyawan diganti menjadi aplikasi Notifikasi Konsumen karena penggunaan aplikasi Sleekr HR dirasa sudah mencukupi dan urgensi terhadap aplikasi Notifikasi Konsumen lebih diutamakan.
Penempatan departemen yang awalnya divisi HRD bersama Bapak Robby Muhdi diubah menjadi departemen logistik / divisi operasional bersama Ibu Indartik yang akhirnya menjadi pembimbing lapangan Kerja Magang. Ibu Indartik menjabarkan proyek aplikasi Notifikasi Konsumen yang akan dibuat. Setelah itu, mencari source yang dibutuhkan dan membuat database, page Login, dan tampilan program.
Pada minggu ketujuh, dilakukan perbaikan view dan controller Login serta perbaikan view seluruh page. Kemudian, melakukan report progress mingguan ke Ibu Indartik untuk mengevaluasi hasil kerja yang dilakukan. Setelah itu, melakukan perbaikan tampilan program sesuai hasil evaluasi report progress. Pada minggu kedelapan, dilanjutkan fungsionalitas page Satu Barang. Membuat model, view, dan controller page History Email. Memperbaiki function yang error. Kemudian, melakukan report progress mingguan ke Ibu Indartik untuk mengevaluasi hasil kerja yang dilakukan.
Pada minggu kesembilan, dilanjutkan perbaikan controller Email dan melanjutkan proyek sampai selesai. Kemudian, melakukan report progress mingguan ke Ibu Indartik untuk mengevaluasi hasil kerja yang dilakukan. Pada minggu kesepuluh, dilanjutkan dengan merapikan source code dan melakukan hosting untuk keperluan testing. Kemudian, melakukan report progress mingguan ke Ibu Indartik beserta testing.
11 Pada minggu kesebelas, dilakukan perbaikan tampilan perbaikan tampilan History Email sesuai evaluasi report progress. Kemudian, melakukan report progress mingguan yang terakhir ke Ibu Indartik dan dinyatakan proyek selesai.
Setelah selesai, dilanjutkan mengerjakan tugas kuliah dan membuat laporan Kerja Magang di kantor sampai dengan minggu kedua belas.
3.3 Uraian Pelaksanaan Kerja Magang
Perancangan dan pembangunan aplikasi ini menggunakan tahapan System Development Life Cycle (SDLC) dengan metode Agile. Metode pengembangan Agile merupakan pengembangan sistem jangka pendek dimana memerlukan adaptasi yang cepat dari pengembang terhadap perubahan dalam bentuk apapun (Tri, 2017). Pelaksanaan kerja magang ini dapat diuraikan menjadi tiga proses, yaitu proses pelaksanaan, kendala yang ditemukan, dan solusi atas kendala yang ditemukan. Berikut uraian dari proses pelaksanaannya.
3.3.1 Proses Pelaksanaan
Tahapan ini terdiri dari beberapa tahap, yaitu perancangan, desain antarmuka, dan implementasi.
A. Perancangan
Pada proses perancangan, dimulai dengan membuat Data Flow Diagram (DFD), Flowchart, Database Schema, Entity Relationship Diagram (ERD), dan struktur tabel.
A.1 Data Flow Diagram
Data Flow Diagram (DFD) adalah representasi grafik yang menggambarkan aliran informasi dan transformasi informasi yang diaplikasikan sebagai data yang
12 mengalir dari masukan (input) dan keluaran (output). Pembuatan DFD mengacu pada simbol DFD menurut Yourdan dan De Marco (Sukamto dkk., 2014).
Gambar 3.2 Diagram Konteks Aplikasi Notifikasi Konsumen
Gambar 3.2 merupakan diagram konteks yang menggambarkan aliran data pada aplikasi web Notifikasi Konsumen yang memiliki 2 entitas, yaitu user dan customer. Entitas user merupakan pengguna yang memiliki keperluan untuk mengirim surel atau melihat riwayat pengiriman surel. Sedangkan entitas customer merupakan penerima surel. Entitas user mengirim data login, data user, data email, dan data template serta menerima data history email dan data user. Kemudian, dari context diagram dibuatkan DFD level 1 yang dapat dilihat pada Gambar 3.3.
Gambar 3.3 DFD Level 1 Aplikasi Notifikasi Konsumen
13 Pada DFD Level 1 terdapat 4 proses, yaitu login authentication, send email, get history email, dan update password. Proses pertama adalah proses login authentication untuk keperluan login. Data login dikirim oleh entitas user untuk diproses. Data login dicek ke dalam database tbl_users. Jika proses berhasil maka data user akan dikirim oleh database tbl_users ke entitas user.
Proses kedua adalah proses send email untuk mengirim surel yang dapat dilakukan setelah proses login authentication berhasil. Data template email dikirim oleh entitas user dan data user dikirim oleh proses login authentication untuk proses send email. Jika proses berhasil maka akan mengirim data email ke entitas customer dan disimpan ke database email history.
Proses ketiga adalah proses get history email untuk menampilkan menampilkan data riwayat pengiriman surel. Data user dikirim oleh entitas user untuk diteruskan ke database email history. Kemudian, data history email dikirimkan kembali ke proses get history email. Data history email akan diproses untuk ditampilkan ke entitas user.
Proses keempat adalah proses update password untuk dapat mengubah password lama menjadi password baru. Data user dikirim setelah proses login authentication berhasil. Proses update password menghasilkan data user baru. Data user baru tersebut disimpan ke database tbl_users. Data user tersebut dikirim kembali ke entitas user.
A.2 Flowchart
Flowchart merupakan sarana penyajian informasi sistematis berupa gambar atau bagan yang memperlihatkan urutan dan hubungan antar proses beserta instruksinya. Setiap proses tertentu digambarkan dengan simbol dan hubungan
14 antar proses digambarkan dengan garis penghubung (Utomo dan Saputra, 2016).
Flowchart aplikasi ini dibagi menjadi tujuh bagian menu, yaitu menu Login, menu Satu Barang, menu Barang Beda Leadtime & Supplier, menu Barang Service, menu History Email dan menu Change Password.
A.2.1 Flowchart Menu Login
Flowchart menu login menggambarkan alur proses login. Flowchart menu login dapat dilihat pada Gambar 3.4.
Gambar 3.4 Flowchart Menu Login
Gambar 3.4 menggambarkan alur yang dimulai saat pertama kali membuka aplikasi. Pada awal alur, muncul tampilan halaman Login. Kemudian, pengguna memilih ingin login atau tidak. Jika ingin login, pengguna memasukkan username dan password, kemudian sistem akan melakukan proses autentikasi dengan database tbl_users. Jika berhasil maka akan menuju ke tampilan halaman Satu Barang. Jika gagal maka akan kembali ke halaman Login.
15 Jika tidak ingin login maka pindah ke lupa password. Jika memilih lupa password maka akan muncul form lupa password. Masukkan username lalu sistem akan mengecek ke dalam database tbl_users. Jika sesuai maka akan dikirim password baru ke email. Jika tidak sesuai maka akan kembali ke halaman Login.
Jika tidak memilih lupa password maka akan alur selesai.
A.2.2 Flowchart Menu Satu Barang
Setelelah proses login berhasil akan muncul menu Satu Barang. Flowchart menu Satu Barang dapat dilihat pada Gambar 3.5.
Gambar 3.5 Flowchart Menu Satu Barang
16 Gambar 3.5 menunjukkan flowchart dari menu Satu Barang. Alur dimulai dengan menampilkan halaman Satu Barang. Jika ingin mengirim surel akan menuju ke menu Email. Pada halaman Satu Barang terdapat navbar untuk berpindah menu.
Jika memilih navbar Barang Beda Leadtime & Supplier akan pindah ke menu Barang Beda Leadtime & Supplier.
Jika memilih navbar Barang Service akan pindah ke menu Barang Service.
Jika memilih navbar History Email akan pindah ke menu History Email. Jika memilih navbar Change Password akan pindah ke menu Change Password. Jika memilih navbar Logout akan keluar dari aplikasi.
A.2.3 Flowchart Menu Barang Beda Leadtime & Supplier
Menu Barang Beda Leadtime & Supplier memiliki alur yang mirip seperti menu sebelumnya. Flowchart menu Barang Beda Leadtime & Supplier dapat dilihat pada Gambar 3.6.
Gambar 3.6 Flowchart Menu Barang Beda Leadtime & Supplier
Gambar 3.6 menunjukkan flowchart dari menu Barang Beda Leadtime &
Supplier. Alur dimulai dengan menampilkan halaman Barang Beda Leadtime &
Supplier. Jika ingin mengirim surel akan pindah ke menu Email. Pada halaman Barang Beda Leadtime & Supplier terdapat navbar seperti menu Satu Barang. Jika memilih navbar sesuai menu maka akan pindah ke menu yang dituju.
17 A.2.4 Flowchart Menu Barang Service
Flowchart menu Barang Service mirip seperti menu sebelumnya dan dapat dilihat pada Gambar 3.7.
Gambar 3.7 Flowchart Menu Barang Service
Gambar 3.7 menunjukkan flowchart dari menu Barang Service. Alur dimulai dengan menampilkan halaman Barang Service. Jika ingin mengirim surel akan pindah ke menu Email. Pada halaman Barang Service terdapat navbar seperti menu Satu Barang. Jika memilih navbar sesuai menu maka akan pindah ke menu yang dituju.
A.2.5 Flowchart Menu History Email
Saat memilih navbar History Email maka akan muncul halaman History Email. Flowchart menu History Email dapat dilihat pada Gambar 3.8.
Gambar 3.8 Flowchart Menu History Email
18 Gambar 3.8 menunjukkan flowchart dari menu History Email. Alur dimulai dengan proses mengambil data riwayat surel dari database email history.
Kemudian, data riwayat pengiriman surel ditampilkan di halaman History Email.
Pada halaman History Email terdapat navbar seperti menu Satu Barang. Jika memilih navbar sesuai menu maka akan pindah ke menu yang dituju.
A.2.6 Flowchart Menu Change Password
User dapat mengganti password akunnya dengan memilih navbar Change Password. Flowchart menu Change Password dapat dilihat pada Gambar 3.9.
Gambar 3.9 Flowchart Menu Change Password
Gambar 3.9 menunjukkan flowchart dari menu Change Password.
Flowchart dimulai dari menampilkan modal form Change Password. Kemudian, user melakukan input password lama dan password baru yang akan dicek ke database tbl_users. Jika berhasil maka akan password baru akan tersimpan di database tbl_users.
A.2.7 Flowchart Menu Email
Menu email digunakan untuk proses pengiriman surel. Flowchart menu email dapat dilihat pada Gambar 3.10.
19 Gambar 3.10 Flowchart Menu Email
Gambar 3.10 menunjukkan alur proses menu email untuk mengirim surel.
Proses dimulai dengan memilih tampilan form template email. Kemudian, user melakukan input data isi surel lalu memilih ingin mengirim surel atau tidak. Jika tidak maka akan kembali ke menu Satu Barang. Jika ingin mengirim maka akan ke proses mengirim surel. Jika berhasil dikirim maka data surel akan disimpan di database email history. Jika gagal maka akan kembali ke tampilan form template email.
A.3 Entity Relationship Diagram (ERD)
Adapun ERD yang dirancang untuk mempermudah pembuatan aplikasi ini.
ERD tersebut dapat dilihat pada Gambar 3.11.
20 Gambar 3.11 ERD Aplikasi Notifikasi Konsumen
21 Terdapat 7 entitas, yaitu user, step, term customer, status, email history satu barang, email history beda leadtime, dan email history barang service. Satu user memiliki banyak email history satu barang, banyak email history beda leadtime, dan banyak email history barang service. Satu step terdapat di dalam satu email history satu barang, satu email history beda leadtime, dan satu email history barang service. Satu term customer terdapat di dalam satu email history satu barang, satu email history beda leadtime, dan satu email history barang service. Satu status terdapat di dalam satu email history satu barang, satu email history beda leadtime, dan satu email history barang service.
A.4 Database Schema
Adapun database schema untuk menyimpan data aplikasi web notifikasi konsumen PT Tridinamika Jaya Instrument yang dapat dilihat pada Gambar 3.12.
Gambar 3.12 Database Schema
22 Terdapat 7 tabel, yaitu email_history_satu_barang, email_history_beda_leadtime, email_history_barang_service, status, step, term_customer, dan tbl_users. Tabel email_history_satu_barang, email_history_beda_leadtime, dan email_history_barang_service menyimpan data email setelah surel berhasil dikirim ke konsumen. Tabel step, status, dan term_customer berisi syarat dan ketentuan mengenai proses PO yang dibuat Tridinamika. Tabel tbl_users berisi data pengguna aplikasi.
A.5 Struktur Tabel
Database pada aplikasi ini memiliki 7 buah tabel, yaitu tbl_users, step, term_customer, status, email_history_satu_barang, email_history_beda_leadtime, dan email_history_barang_service. Detil struktur tabel adalah sebagai berikut.
A.5.1 Struktur Tabel Tbl_users
Tabel tbl_users digunakan untuk menyimpan data user. Struktur tabel tbl_users dapat dilihat pada Tabel 3.2.
Tabel 3.2 Struktur Tabel Tbl_users
No Nama Kolom Tipe Data Size Keterangan
1 Username Varchar 10 Primary key
2 Password Varchar 60
3 Email Varchar 50
4 User_level Varchar 1
Tabel 3.2 menyimpan data berupa username, password, email, dan user level. Data tersebut digunakan untuk login, lupa password, dan ganti password.
Username pada tbl_users digunakan sebagai primary key.
A.5.2 Struktur Tabel Term_customer
Tabel term_customer digunakan untuk menyimpan data syarat dan ketentuan pelanggan. Struktur tabel term_customer dapat dilihat pada Tabel 3.3.
23 Tabel 3.3 Struktur Tabel Term_customers
No Nama Kolom Tipe Data Size Keterangan
1 Id_tc Char 4 Primary key
2 Ket_term Varchar 60
Tabel 3.3 menyimpan data id_tc dan ket_term. Data tersebut digunakan untuk keperluan History Email dan ketentuan pengiriman surel. Id_tc pada tabel term_customer digunakan sebagai primary key.
A.5.3 Struktur Tabel Status
Tabel status digunakan untuk menyimpan data status ketersediaan barang.
Struktur tabel status dapat dilihat pada Tabel 3.4.
Tabel 3.4 Struktur Tabel Status
No Nama Kolom Tipe Data Size Keterangan
1 Id_status Varchar 3 Primary key
2 Ket_status Varchar 60
Tabel 3.4 menyimpan data id_status dan ket_status. Data tersebut digunakan untuk keperluan History Email dan ketentuan pengiriman surel. Id_status pada tabel status digunakan sebagai primary key.
A.5.4 Struktur Tabel Step
Tabel step digunakan untuk menyimpan data status PO. Struktur tabel step dapat dilihat pada Tabel 3.5.
Tabel 3.5 Struktur Tabel Step
No Nama Kolom Tipe Data Size Keterangan
1 Id_step Varchar 6 Primary key
2 Ket_step Varchar 60
Tabel 3.5 menyimpan data id_step dan ket_step. Data tersebut digunakan untuk keperluan History Email dan ketentuan pengiriman surel. Id_step pada tabel step digunakan sebagai primary key.
24 A.5.5 Struktur Tabel Email_history_satu_barang
Tabel email_history_satu_barang menyimpan data isi surel yang telah berhasil dikirim pada menu Satu Barang. Struktur tabel status dapat dilihat pada Tabel 3.6.
Tabel 3.6 Struktur Tabel Email_history_satu_barang
No Nama Kolom Tipe Data Size Keterangan
1 Id_history Int 11 Primary key
2 So_number Varchar 24
3 Customer_name Varchar 70
4 Id_tc Char 4 Foreign key
5 Id_status Char 3 Foreign key
6 Id_step Char 6 Foreign key
7 To_mail Varchar 150
8 Cc_mail Varchar 150
9 Sent_date Datetime
10 Kurir Varchar 30
11 Awb Varchar 40
12 Username Varchar 10 Foreign key
Tabel 3.6 menyimpan data id_history, so_number, customer_name, id_tc, id_status, id_step, to_mail, cc_mail, sent_date, kurir, awb, dan username. Data tersebut digunakan untuk menampilkan informasi di halaman History Email.
Id_history pada tabel email_history_satu_barang digunakan sebagai primary key, sedangkan id_tc, id_status, id_step, dan username digunakan sebagai foreign key.
A.5.6 Struktur Tabel Email_history_beda_leadtime
Tabel email_history_beda_leadtime menyimpan data isi surel yang telah berhasil dikirim pada menu Barang Beda Leadtime & Supplier. Struktur tabel status dapat dilihat pada Tabel 3.7.
Tabel 3.7 Struktur Tabel Status Email_history_beda_leadtime No Nama Kolom Tipe Data Size Keterangan
1 Id_history Int 11 Primary key
2 So_number Varchar 24
3 Customer_name Varchar 70
25 Tabel 3.7 Struktur Tabel Status Email_history_beda_leadtime (lanjutan) No Nama Kolom Tipe Data Size Keterangan
4 Id_tc Char 4 Foreign key
5 Id_status Char 3 Foreign key
6 Id_step Char 6 Foreign key
7 To_mail Varchar 150
8 Cc_mail Varchar 150
9 Sent_date Datetime
10 Kurir Varchar 30
11 Awb Varchar 40
12 Username Varchar 10 Foreign key
Tabel 3.7 menyimpan data id_history, so_number, customer_name, id_tc, id_status, id_step, to_mail, cc_mail, sent_date, kurir, awb, dan username. Data tersebut digunakan untuk menampilkan informasi di halaman History Email.
Id_history pada tabel email_history_beda_leadtime digunakan sebagai primary key, sedangkan id_tc, id_status, id_step, dan username digunakan sebagai foreign key.
A.5.7 Struktur Tabel Email_history_barang_service
Tabel email_history_barang_service menyimpan data isi surel yang telah berhasil dikirim pada menu Barang Service. Struktur tabel status dapat dilihat pada Tabel 3.8.
Tabel 3.8 Struktur Tabel Email_history_barang_service
No Nama Kolom Tipe Data Size Keterangan
1 Id_history Int 11 Primary key
2 So_number Varchar 24
3 Customer_name Varchar 70
4 Id_tc Char 4 Foreign key
5 Id_status Char 3 Foreign key
6 Id_step Char 6 Foreign key
7 To_mail Varchar 150
8 Cc_mail Varchar 150
9 Sent_date Datetime
10 Kurir Varchar 30
11 Awb Varchar 40
12 Username Varchar 10 Foreign key
26 Tabel 3.8 menyimpan data id_history, so_number, customer_name, id_tc, id_status, id_step, to_mail, cc_mail, sent_date, kurir, awb, dan username. Data tersebut digunakan untuk menampilkan informasi di halaman History Email.
Id_history pada tabel email_history_barang_service digunakan sebagai primary key, sedangkan id_tc, id_status, id_step, dan username digunakan sebagai foreign key.
B. Desain Antarmuka
Desain antarmuka untuk aplikasi Notifikasi Konsumen dibuat dengan tampilan yang simple sehingga mudah untuk digunakan. Aplikasi ini memiliki 3 desain antarmuka, yaitu desain halaman login, desain halaman pengiriman surel, dan desain halaman History Email. Desain halaman surel digunakan untuk tiga menu, yaitu halaman Satu Barang, halaman Barang Beda Leadtime & Supplier, dan halaman Barang Service. Desain antarmuka halaman login dapat dilihat pada Gambar 3.13.
Gambar 3.13 Desain Antarmuka Halaman Login
27 Gambar 3.13 adalah desain antarmuka tampilan halaman awal saat menggunakan aplikasi Notifikasi Konsumen dan digunakan untuk keperluan login dan lupa password. Terdapat kolom untuk input username dan password serta tombol login dan forget. Adapula desain antarmuka halaman pengiriman surel yang dapat dilihat pada Gambar 3.14.
Gambar 3.14 Desain Antarmuka Halaman Pengiriman Surel
Gambar 3.14 adalah desain antarmuka halaman pengiriman surel yang digunakan ke tiga menu, yaitu menu Satu Barang, menu Barang Beda Leadtime &
Supplier, dan menu Barang Service. Adapula desain antarmuka halaman History Email yang dapat dilihat pada Gambar 3.15.
28 Gambar 3.15 Desain Antarmuka Halaman History Email
Gambar 3.15 adalah desain antarmuka pada halaman History Email saat memilih menu History Email. Pada bagian ini terdapat informasi riwayat pengiriman surel ke pelanggan. Semua riwayat pengiriman surel ditampilkan ke dalam satu halaman.
C. Implementasi
Pada tahap implementasi, dimulai dengan pembuatan menu Login.
Kemudian, dilanjutkan dengan pembuatan modul Email. Setelah itu, dilanjutkan pembuatan menu Satu Barang, menu Barang Beda Lead Time & Supplier, menu Barang Service. Kemudian, dilanjutkan pembuatan menu History Email dan terakhir menu Change Password. Implementasi dilakukan menggunakan framework CodeIgniter dengan dukungan library PHPMailer dan Bootstrap.
29 C.1 Menu Login
Menu login merupakan halaman pertama yang akan muncul setelah membuka aplikasi. Pada menu login terdapat logo perusahaan, kolom username, kolom password, tombol login, tombol password, dan footer. Tampilan menu login dapat dilihat pada Gambar 3.16.
Gambar 3.16 Halaman Login
Gambar 3.16 ini menampilkan halaman login. User diminta mengisi kolom username dan password lalu menekan tombol login. Setelah tombol login ditekan, akan terjadi proses autentikasi dengan membandingkan input dari user dengan database. Jika login berhasil, akan ditampilkan menu Satu Barang. Tombol forgot digunakan untuk lupa password. Saat tombol forgot ditekan maka akan muncul modal form forgot password yang dapat dilihat pada Gambar 3.17.
30
Gambar 3.17 Modal Form Forgot Password
Gambar 3.17 ini menampilkan modal form forgot password. Terdapat kolom username, tombol close, dan tombol send. User diminta mengisi kolom username lalu menekan tombol send. Kemudian, input user akan dicek ke database.
Jika berhasil maka akan dikirimkan password baru ke alamat email yang telah tersimpan di database sesuai username. Password baru tersebut berupa kombinasi huruf dan angka acak.
C.2 Menu Satu Barang
Menu Satu Barang merupakan menu yang akan muncul berikutnya setelah login berhasil. Menu ini digunakan untuk memberikan pemberitahuan kepada konsumen melalui surel terkait barang yang dipesan. Terdapat navigation bar (navbar) dan pilihan surel yang akan dikirim berdasarkan syarat dan ketentuannya.
Navbar berguna untuk pindah ke halaman Satu Barang, halaman Barang Beda Leadtime & Supplier, halaman Barang Service, halaman History Email, serta menampilkan modal form Change Password, dan logout. Tampilan menu Satu Barang dapat dilihat pada Gambar 3.18.
31 Gambar 3.18 Halaman Satu Barang
Gambar 3.18 ini menampilkan halaman Satu Barang. Terdapat pilihan surel yang akan dikirim sesuai syarat dan ketentuannya. Baris tempo, 50% down payment (DP), 50% sebelum pengiriman atau 100% sesudah pengiriman, dan 50% DP, 50%
termin merupakan syarat pembayaran yang dipilih konsumen. Kolom status stock merupakan status ketersediaan barang yang dipesan konsumen. Kolom step merupakan alur proses pengiriman surel. Kolom action terdapat tombol email untuk mengirim surel sesuai step.
C.3 Menu Barang Beda Leadtime & Supplier
Menu Barang Beda Leadtime & Supplier digunakan untuk memberikan pemberitahuan kepada konsumen melalui surel terkait barang yang dipesan tetapi barang tersebut ternyata diketahui memiliki keterlambatan waktu dan perubahan supplier dari kesepakatan sebelumnya. Terdapat navbar dan pilihan surel yang akan dikirim berdasarkan syarat dan ketentuannya. Tampilan menu Barang Beda Leadtime & Supplier dapat dilihat pada Gambar 3.19.
32 Gambar 3.19 Halaman Barang Beda Leadtime & Supplier
Gambar 3.19 ini menampilkan halaman barang beda leadtime & supplier.
Terdapat pilihan surel yang akan dikirim sesuai syarat dan ketentuannya. Baris tempo, 50% DP, 50% sebelum pengiriman atau 100% sesudah pengiriman, dan 50% DP, 50% termin merupakan syarat pembayaran yang dipilih konsumen.
Kolom status stock merupakan status ketersediaan barang yang dipesan konsumen.
Kolom step merupakan alur proses pengiriman surel. Kolom action terdapat tombol email untuk mengirim surel sesuai step.
C.4 Menu Barang Service
Menu Barang Service digunakan untuk memberikan pemberitahuan kepada konsumen melalui surel terkait barang yang diservis. Terdapat navbar dan pilihan surel yang akan dikirim berdasarkan syarat dan ketentuannya. Tampilan menu Barang Service dapat dilihat pada Gambar 3.20.
33 Gambar 3.20 Halaman Barang Service
34 Gambar 3.20 ini menampilkan halaman Barang Service. Terdapat pilihan surel yang akan dikirim sesuai syarat dan ketentuannya. Baris tempo & service luar negeri (LN), tempo & service lokal, 100% sebelum service LN, dan 100% sebelum service lokal merupakan syarat pembayaran yang dipilih konsumen. Kolom status stock merupakan status ketersediaan barang yang dipesan konsumen. Kolom step merupakan alur proses pengiriman surel. Kolom action terdapat tombol email untuk mengirim surel sesuai step.
C.5 Menu Email
Menu Email berfungsi sebagai controller dalam mengirim surel. Modul ini berisi function PHPMailer dan kumpulan template surel yang dipindahkan dari file Microsoft Excel. Menu Email dihubungkan ke setiap bagian pilihan surel dari setiap menu. Ketika tombol email yang terdapat pada kolom action ditekan, maka akan menampilkan modal form template surel. Ada beberapa template surel yang sama di setiap syarat dan ketentuannya. Contoh tampilan modal form template surel dapat dilihat pada Gambar 3.21.
Gambar 3.21 Modal Form Template Surel
35 Gambar 3.21 ini menampilkan modal form template surel dari halaman satu barang baris tempo kolom status stock indent kolom step saat purchase order (PO) dikirim ke Principal (Saat akan menginput PO ke file product). Terdapat kolom penerima surel (to), carbon copy (cc), judul surel (subject), nama konsumen, dan nomor PO pada modal form template surel. User diminta mengisi semua kolom tersebut dan menekan tombol send. Setelah tombol send ditekan maka modul email akan melakukan proses pengiriman surel.
C.6 Menu History Email
Menu History Email berisi kumpulan riwayat pengiriman surel yang telah berhasil dilakukan. Riwayat pengiriman dari menu Satu Barang, menu Barang Beda Leadtime & Supplier, dan menu Barang Service ditampilkan ke dalam satu halaman. Tampilan halaman tersebut dapat dilihat pada Gambar 3.22.
Gambar 3.22 Halaman History Email
36 Gambar 3.22 Halaman History Email (lanjutan)
Gambar 3.22 merupakan tampilan halaman History Email yang berisi riwayat pengiriman surel ke konsumen. Terdapat informasi mengenai nomor sales order (SO), nama konsumen, term konsumen, status stock, step, to, cc, waktu surel dikirim, kurir, dan air waybill (AWB). Riwayat pengiriman surel dari menu Satu Barang, menu Barang Beda Leadtime & Supplier, dan menu Barang Service ditampilkan ke dalam satu halaman History Email yang dipisahkan oleh tabel.
C.7 Menu Change Password
Menu Change Password berfungsi untuk mengubah password yang biasa dilakukan ketika mendapatkan password baru. Modal form change password akan muncul ketika menekan navbar change password. Tampilan modal change password dapat dilihat pada Gambar 3.23.
37 Gambar 3.23 Modal Form Change Password
Pada Gambar 3.23 user diminta mengisi kolom old password, kolom new password, kolom confirm new password, dan menekan tombol submit. Kemudian, input user akan dicek ke database. Jika berhasil maka password user telah terganti dengan yang baru dan tersimpan di dalam database tbl_users.
3.3.2 Kendala yang Ditemukan
Beberapa kendala yang dihadapi selama proses magang berlangsung adalah sebagai berikut.
1. Kurangnya pemahaman tentang penggunaan library PHPMailer untuk mengirim surel.
2. Kurangnya koordinasi dan memahami requirements karena pembimbing lapangan hanya memiliki waktu luang untuk berdiskusi pada hari Jumat.
38 3.3.3 Solusi atas Kendala yang Ditemukan
Solusi dari kendala yang di alami adalah sebagai berikut.
1. Mencari informasi tentang penggunaan library PHPMailer melalui internet dan berdiskusi dengan teman yang sudah pernah menggunakannya.
2. Menggunakan waktu diskusi dengan sebaik-baiknya untuk memahami requirements yang dibutuhkan.
