7
BAB III
PELAKSANAAN KERJA MAGANG
3.1 Kedudukan dan Koordinasi
Dalam pelaksaan kerja magang di Mr. Calories, penulis memegang jabatan sebagai Back-End Developer Intern di divisi Web Developer, dengan supervisor dari Bapak Ricky Juslim, selaku owner dari Mr. Calories.
3.2 Tugas yang Dilakukan
Selama pelaksaan kerja magang, tanggung jawab yang diberikan adalah sebagai berikut:
a. Merancang dan membangun modul newsletter pada website Mr. Calories. b. Merancang dan membangun template email dan modul pengiriman email
newsletter kepada subscriber Mr. Calories
c. Berkolaborasi dengan tim Front-end Developer untuk membangun website Mr. Calories.
8
3.3 Uraian Pelaksanaan 3.3.1 Proses Pelaksanaan
Kerja magang dilaksanakan selama 2 (dua) bulan atau 8 (delapan) minggu dengan timeline kerja sebagai berikut.
Nama Kegiatan Minggu
1 2 3 4 5 6 7 8 Pengenalan framework dan alur kerja Pembuatan modul Newsletter Pembuatan template email Pembuatan modul pengiriman email Fix bug
Tabel 3.1 Jadwal Kerja Magang
3.3.2 Framework dan Alur Kerja yang Digunakan
Pada minggu pertama magang, diberikan pembagian tugas pada setiap anggota tim. Dan mempelajari framework dan Bahasa pemrograman yang akan digunakan di Mr. Calories. Framework yang digunakan dalam membangun website Mr. Calories adalah Laravel dan Vuejs dengan Bahasa pemrograman javascript, dan PHP. Menggunakan database MySql, seta menggunakan third-party Mailchimp untuk mengelola data subscriber pada website Mr.Calories.
9 Laravel adalah sebuah framework PHP yang dirilis dibawah lisensi MIT, dibangun dengan konsep MVC (Model View Controller). Laravel adalah pengembangan website berbasis MVP yang ditulis dalam PHP yang dirancang untuk meningkatkan kualitas perangkat lunak dengan mengurangi biaya pengembangan awal dan biaya pemeliharaan, dan untuk meningkatkan pengalaman bekerja, menyediakan sintaks yang ekspresif, jelas dan menghemat waktu (Hanry Ham, 2018).
VueJs adalah salah satu library javascript yang digunakan dan dimanfaatkan untuk membuat sebuah website yang interaktif. Fokus pada Vuejs hanya pada view layer atau lapisan tampilannya sehingga sangat mudah diterapkan pada suatu website (Vuejs, 2020).
Mailchimp adalah marketing automation platform dan email marketing services yang memungkinkan untuk mengirim email kebeberapa penerima dalam waktu yang bersamaan. Mailchimp didirikan oleh sebuah perusahaan asal Amerika Serikat pada tahun 2001. Sejak berdiri hingga sekarang, Mailchimp menjadi salah satu marketing automation platform yang paling banyak digunakan didunia.
10
3.3.3 Perancangan Modul A. Use Case Diagram
Pada website Mr. Calories memiliki use case diagram seperti berikut, dimana memiliki 2 actor yaitu customer dan admin. Pada gambar 3.1 dapat dilihat customer dapat mengakses home, product, about, dan subscribe. Dan admin dapat mengakses login, dashboard, send email, subscriber list, dan product.
11
B. Sitemap
Pada website Mr. Calories memiliki sitemap seperti berikut, dimana memiliki 3 halaman utama yaitu home, product, dan about. Memiliki external content berupa instagram, whatsapp, dan youtube. Dan memiliki area admin yang terdiri dari halaman login, dashboard, email, subscriber, dan product.
12
C. Flowchart
C.1 Flowchart Halaman Customer
Website Mr. Calories memiliki 2 halaman utama yaitu halaman untuk customer dan halaman untuk admin. Berikut adalah flowchart pada halaman customer. Hal yang akan pertama kali dilihat adalah halaman home yang menampilkan menu home, product, dan about. Serta menampilkan isi content dan footer.
13
C.2 Flowchart Subscribe Website Mr. Calories
Pada website Mr. Calories memiliki newsletter. Sehingga jika customer ingin mendapatkan newsletter dari Mr. Calories maka harus melakukan subscribe terlebih dahulu. Berikut merupakan flowchart melakukan subscribe. Dapat dilihat pada Gambar 3.4 setelah pengunjung mengisi email dan melakukan submit. Maka akan dilakukan pengecekan status dari email yang telah di submit. Jika email belum ada pada daftar subscriber maka mailchimp akan mengirimkan email subscribe confirmation ke email tersebut.
14
C.3 Flowchart Halaman Admin
Website Mr.Calories memiliki halaman admin dimana berguna untuk melihat subscriber, mengirim email newsletter, dan melakukan create read update delete (CRUD) pada produk. Berikut merupakan flowchart pada halaman Admin.
15
C.4 Flowchart Menampilkan Data Subscriber di Halaman Admin
Berikut merupakan flowchart untuk menampilkan data subscriber Mr.Calories ke halaman admin yang didapatkan melalui API Mailchimp.
16
C.5 Flowchart Mengirim Newsletter Email ke Subscriber
Pada halaman admin terdapat fitur untuk mengirim email newsletter kepada para subscriber Mr. Calories. Berikut adalah flowchart pengiriman newsletter ke subscriber.
17
D. Activity Diagram
D.1 Activity Diagram Subscribe Mr. Calories
Activity diagram Subscribe Mr. Calories digunakan untuk customer yang ingin mendapatkan email newsletter dari Mr. Calories.
18
D.2 Activity Diagram Menampilkan Daftar Subscriber
Activity diagram menampilkan daftar subscriber digunakan untuk admin melihat alamat email dan status dari semua subscriber Mr. Calories.
Gambar 3.9 Activity Diagram Menampilkan Daftar Subscriber
D.3 Activity Diagram Mengirim Newsletter Email
Activity diagram mengirim newsletter email digunakan untuk admin mengirim email newsletter kepada para subscriber Mr. Calories.
19 Gambar 3.10 Activity Diagram Mengirim Newsletter Email
20
E. Mockup
E.1 Mockup Halaman Untuk Mengirim Newsletter
Pada Gambar 3.11 merupakan mockup halaman untuk mengirmkan newsletter. Pada halaman ini terdapat 3 area utama, yaitu area form, color, dan preview. Dimana area form berisi data-data yang harus diisikan sebelum mengirimkan newsletter, area color berisi warna-warna yang akan digunakan pada template, dan preview berisi tampilan dari newsletter yang akan dikirimkan sesuai dengan data yang didapatkan dari 2 area sebelumnya.
21
E.2 Mockup Template Email Newsletter
Pada Gambar 3.12 merupakan mockup untuk template yang akan digunakan sebagai email newsletter yang terdiri dari 3 bagian utama yaitu:
a. Header yang berisi logo dan nama perusahaan.
b. Body yang berisi gambar, subject email, description, dan sebuah button. c. Footer yang berisi alamat perusahaan dan unsubscribe button.
22
F. Hasil Implementasi
F.1 Hasil Implementasi Subscribe Mr. Calories
Pada Gambar 3.13 merupakan hasil implementasi subscribe Mr. Calories. Dimana jika user ingin melakukan subscribe, maka harus memasukan email yang aktif dan menekan tombol subscribe.
Gambar 3.13 Implementasi Subscribe Mr. Calories
F.2 Hasil Implemetasi Email Subscribe Confirmation
Pada Gambar 3.14 merupakan hasil implementasi email subscribe confirmation yang berhasil dikirimkan ke email yang telah dimasukan sebelumnya. dan jika menyetujui untuk melakukan subscribe maka harus menekan tombol confirmation tersebut.
23 Gambar 3.14 Implementasi Email Subscribe Confirmation
F.3 Hasil Implementasi Halaman Subscriber List
Pada Gambar 3.15 merupakan hasil implementasi halaman subscriber list. Dimana terdapat table yang berisikan list email subscriber Mr. Calories beserta status dari subscriber tersebut. Subscriber memiliki 3 buah status yaitu :
a. Subscribe, Jika sudah menekan tombol subscribe confirmation pada email yang telah dikirimkan.
b. Unsubscribe, Jika melakukan unsubscribe pada Mr. Calories.
c. Pending, jika belum menekan tombol subscribe confirmation pada email yang telah dikirimkan.
24 Gambar 3.15 Implementasi Halaman Subscriber List
F.4 Hasil Implementasi Halaman Newsletter
Pada Gambar 3.16 merupakan hasil implementasi pada halaman newsletter pada bagian form. Form ini berisi company name, subject, upload image, description, button tittle, button url, dan company address.
25 Pada Gambar 3.17 merupakan hasil implementasi pada halaman newsletter pada bagian color. Pada bagian color dapat menentukan warna background dan text pada setiap bagian template.
Gambar 3.17 Implementasi Halaman Newsletter Bagian Color
Pada Gambar 3.18 merupakan hasil implementasi pada halaman newsletter pada bagian preview dan send. pada bagian preview akan menampilkan tampilan template yang akan dikirimkan kepada subscriber Mr. Calories. Dan jika ingin mengirimkannya tekan tombol send campaign.
26 Gambar 3.18 Implementasi Halaman Newsletter Bagian Preview dan Send
F.5 Hasil Implementasi Template Email Newsletter
Gambar 3.19 merupakan hasil implementasi template newsletter bagian header yang berhasil dikirimkan kepada email subscriber Mr. Calories.
27 Pada Gambar 3.20 merupakan hasil implementasi template newsletter bagian body dan footer yang berhasil dikirimkan kepada email subscriber Mr. Calories.
Gambar 3.20 Implementasi Template Email Newsletter Body dan Footer
3.3.4 Kendala Yang Ditemukan
Kendala yang dialami selama menjalani kerja magang di Mr. Calories adalah kurang jelasnya requirements yang dibutuhkan untuk membangun website Mr. Calories, dan sering terjadi bug di backend yang membuat website tidak berjalan dengan semestinya.
28
3.3.5 Solusi Atas Kendala yang Ditemukan
Setiap kendala yang terjadi pasti memiliki cara untuk menyelesaikannya. Solusi untuk menangani kendala-kendala tersebut adalah berinisiatif untuk bertanya dengan supervisor terkait requirements yang kurang jelas, melakukan kerja sama dengan tim backend untuk mencari bug dan memperbaikinya, serta mencari referensi di internet terkait dengan bug yang dialami.
