9
BAB III
PELAKSANAAN KERJA MAGANG
3.1 Kedudukan dan Koordinasi
Pelaksanaan kerja magang yang telah dilakukan di PT. Sinari Generasi Indonesia sebagai Front end Developer yang memiliki tugas untuk melakukan pembuatan e-commerce berbasis web atau untuk produk dari perusahaan sesuai dengan standar dan tujuan dari perusahaan.
Selama melakukan pelaksanaan program kerja magang, pengerjaan dilakukan secara individu tanpa pembentukan team dan langsung dibimbing oleh Bapak Achmad Hisan selaku Project Manajer. Pihak perusahaan juga membantu dalam menyelesaikan project kerja magang dengan membantu biaya pembelian hosting dan transfer domain, dan juga membantu dalam mencari data – data dan konten – konten yang nantinya akan dimasukkan kedalam web.
3.2 Tugas yang Dilakukan
Pada program kerja magang sebagai Frontt end Developer di PT. Sinari Generasi Indonesia, tugas yang dilakukan adalah membuat design e-commerce, membuat database dan program, melakukan testing, dan melakukan implementasi web yang akan digunakan untuk menunjang perusahaan dalam melakukan penjualan komoditas.
10 3.3 Uraian Kerja Magang
Berikut merupakan uraian proses kerja magang mulai dari minggu pertama sampai minggu kedepalan selama 40 Hari:
3.3.1 Minggu Pertama : Melakukan Meeting untuk Planning Web
Pada minggu pertama, pelaksanaan kerja magang dimulai dengan perkenalan dengan rekan-rekan kerja guna untuk beradaptasi terhadap lingkungan kerja magang, dan berkomunikasi dengan Bapak Wynn Nathaniel Wijaya selaku CEO PT. Sinari Generasi Indonesia dan Bapak Acmad Hisan selaku Project Manajer dan pembimbing lapangan kerja magang.
Sebelum melakukan pembuatan web, hal pertama yang dilakukan adalah melakukan meeting terkait tampilan web, web yang diminta adalah web yang sederhana dan fitur-fitur menarik yang nantinya akan ada dalam web e-commerce.
11 Gambar 3.1 Hasil Pembahasan untuk Tampilan Web
Pada gambar 3.1 merupakan gambaran atau sketsa halaman utama pada web yang akan didesain dan dibangun bersama dengan Bapak Wynn Nathaniel Wijaya dan Bapak Achmad Hisan untuk PT. Sinari Generasi Indonesia. Web yang
12 diinginkan adalah web yang sederhana sesuai dengan desain awal, yaitu memiliki tujuan untuk semua pelanggan dapat lebih mudah dalam mengakses web.
Sebelum melakukan pembuatan web, tugas yang diberikan pertama kali adalah melakukan transfer Hosting web sinari.co.id, karena sebelumnya web sinari yang berisikan Profile Company dibuat oleh pihak ketiga yaitu jasa pembuatan web.
Di karenakan sinari ingin menggunakan domain co.id yang sudah ada, maka harus di lakukan transfer CPANEL hosting dari pembuat web yang lama. Oleh karena itu saya sendiri yang menghubungi pembuat web untuk melakukan transfer Hosting.
Untuk melakukan transfer hosting maka perlu untuk membeli hosting yang baru, karena hosting web yang lama sudah expired, oleh karena itu harus membeli hosting yang baru agar dapat melakukan transfer hosting. Pembelian hosting dibeli di hostinger.co.id berupa premium hosting selama 12 Bulan beserta Domain Transfer sinari.co.id sebesar Rp. 845.579,90. Setelah melakukan pembayaran, langkah selanjutnya adalah melakukan transfer hosting.
Dalam proses transfer hosting dibantu oleh Bapak Syarif selaku staff dari Bapak Stevan, sebelum proses transfer dengan Bapak Syarif, terlebih dahulu membeli hosting di hostinger yang sebelumnya sudah disarankan oleh Bapak Stevan sendiri.
3.3.2 Minggu Kedua : Mengumpulkan data Web dan membuat desain Web
Pada minggu kedua, setelah melakukan pembelian hosting dan transfer hosting kemudian mulai mengumpulkan konten-konten yang akan dimasukkan ke e-commerce sinari, dan juga membuat tampilan e-commerce sesuai dengan
13 keinginan dari perusahaan. Berikut adalah lampiran pengumpulan konten untuk e- commerce sinari:
Gambar 3.2 Konten yang telah dikumpulkan untuk isi dari e-commerce
Pada gambar 3.2 merupakan konten yang telah dikumpulkan, selanjutnya program kerja magang yang akan dikerjakan adalah mulai melakukan pembahasan terkait ui/ux atau tampilan web bersama Bapak Wynn Nathaniel Wijaya dan juga Bapak Achmad Hisan berdasarkan kebutuhan yang telah dipaparkan oleh perusahaan untuk dapat memudahkan dalam membuat desain prototyping web yang akan dibuat. Setelah melakukan pembahasan tampilan web yang ada maka selanjutnya membuat tampilan ui/ux e-commerce menggunakan Software Axure.
14 Gambar 3.3 Design Tampilan Slideshow pada halaman Home
Pada gambar 3.3 merupakan body dari bagian Home, terdapat 3 Slider yang berfungsi untuk memberikan informasi tentang PT. Sinari Generasi Indonesia secara singkat dan jelas.
Gambar 3.4 Design Tampilan About Us pada halaman Home
15 Pada gambar 3.4 merupakan tampilan About Us, dimana halaman ini
berisikan informasi secara singkat, padat, dan jelas tentang komoditas yang dijalankan oleh perusahaan.
Gambar 3.5 Design Tampilan Kategori pada halaman Home
Pada gambar 3.5 merupakan kategori komoditas, terdapat 3 kategori hasil yaitu hasil pertanian, perikanan, dan kerajinan. Saat mengklik pada salah satu kategori maka akan menuju ke halaman yang di klik, seperti gambar di bawah ini:
16 Gambar 3.6 Produk Kategori Pertanian
Pada gambar 3.6 merupakan tampilan kategori pertanian, kategori ini akan ada banyak produk-produk yang dijual, contohnya kacang mete, kopi, cengkeh, vanilla, dan lain-lain.
3.3.3 Minggu Ketiga : Membuat Database
Pada minngu ketiga, konten konten dikumpulkan bersama dengan bapa achmad hisan untuk detail produk dan foto- foto yang akan digunakan untuk produk dalam web.
17 Gambar 3.7 Foto yang akan digunakan untuk halaman Home e-commerce
Pada gambar 3.7 merupakan foto yang akan digunakan pada halaman Home untuk bagian Slide dan juga kategori produk.
Gambar 3.8 Konten komoditas
18 Pada gambar 3.8 merupakan konten yang akan dimasukkan untuk detail produk setiap komoditas, setelah selesai mengumpulkan konten, pada minngu ini sudah mulai masuk ke tahap pembuatan program, tahapan ini merupakan yang terpenting dalam membuat suatu program.
Untuk pembuatan program yang pertama adalah membuat Database menggunakan MySQL PhpMyAdmin Database. Database MySQL kemudian akan terhubung ke dalam PhpMyAdmin, penggunaan PhpMyAdmin sendiri sebagai penghubung dipilih karena penggunaannya yang familiar untuk pengembangan website dan cukup mudah dalam pengoperasiannya.
Gambar 3.9 Database
Pada gambar 3.9 merupakan Database yang terdapat 4 fungsi yang berbeda, berikut adalah penjelasan Database diatas:
a. Hk_brg, berfungsi untuk menuimpan data barang yang diinput
b. Hk_kategori, berfungsi untuk menyimpan data kategori, menambah dan mengedit kategori
19 c. Hk_Slider, berfungsi untuk menyimpan gambar yang telah di Upload dan
edit gambar Slide yang ada pada hal Home
d. Hk_Users, berfungsi untuk menyimpan dan melihat data User yang telah melakukan registrasi.
Gambar 3.10 Tabel Relasi
Pada gambar 3.10 merupakan tabel relasi, terdapat empat tabel yaitu tabel Users, Kategori, Barang, dan Slider.
20 3.3.4 Minggu Keempat : Membuat Program
Pada minggu keempat ini sudah mulai masuk ke tahap pembuatan program, tahapan ini merupakan yang terpenting dalam membuat suatu program. Pembuatan program menggunakan Visual Studio Code sebagai tools dalam melakukan coding.
Untuk pembuatan program yang pertama adalah halaman Login dan register
Gambar 3.11 Pembuatan program Login
Pada gambar 3.11 merupakan proses pembuatan program Login yang nantinya dapat digunakan untuk Login User dan Admin.
21 Gambar 3.12 Pembuatan Program Register
Pada gambar 3.12 merupakan proses pembuatan Register, Register sendiri sangat dibutuhkan untuk perusahaan karena saat User melakukan Register maka perusahaan akan mengetahui informasi customer yang nantinya akan digunakan untuk data dan lain sebagainya.
Selanjutnya Coding yang dilakukan adalah mulai mengUpload produk, pemasangan fitur-fitur.
22 Gambar 3.13 Coding untuk bagian Header pada Home
Pada gambar 3.13 merupakan proses pembuatan program Header pada halaman Home yang nantinya akan digunakan untuk melihat fitur yang ada.
Gambar 3.14 Coding untuk bagian Dashboard
23 Pada gambar 3.14 merupakan proses pembuatan program Dashboard yang akan digunakan untuk memasang gambar slide.
Gambar 3.15 Coding untuk bagian About Us
Pada gambar 3.15 merupakan proses pembuatan program untuk About Us yang nantinya akan dimasukkan gambar dan juga penjelasan tentang komoditas dari PT. Sinari Generasi Indonesia.
3.3.5 Minggu Kelima : Testing Web di Server
Pada minggu kelima ini melanjutkan melakukan proses Coding untuk merancang proses-proses yang ada didalam web yang sudah mulai dilakukan dari minggu keempat.
24 Gambar 3.16 Coding untuk bagian Kategori
Pada gambar 3.16 merupakan proses pembuatan program Kategori, pada bagian kategori admin nantinya akan bisa mengedit kategori, menambah dan menghapus kategori.
Gambar 3.17 Coding untuk bagian Detail Produk
25 Pada gambar 3.17 diatas merupakan proses pembuatan program Detail Produk, dimana pada halaman ini berisikan detail produk berupa gambar produk, spesifikasi produk, dan penjelasan tentang produk.
Selanjutnya melihat hasil dari pembuatan program yang sudah dibuat dan melakukan testing terhadap program yang sudah dibuat, apakah program tersebut dapat dijalankan atau belum, dan juga memastikan bahwa program yang telah dibuat sesuai dengan keinginan perusahaan dan dapat digunakan dengan baik. Pada testing web menggunakan CPanel.
Gambar 3.18 File Manager pada Hosting
Pada gambar 3.18 merupakan screenshot dari file manager pada Hpanel yang ada pada hostinger, gambar diatas juga sudah melakukan Upload dari localhost ke live server sinari.
26 3.3.6 Minggu Keenam : Revisi Web dan Penambahan Slideshow
Pada minggu keenam, perusahaan meminta untuk melakukan sedikit perubaahan pada web utama sinari, perubahan yang dilakukan pada bagian About Us, Visi dan Misi, dan juga gambar pada web utama
Gambar 3.19 Edit bagian About Us pada Web utama Sinari.co.id
Pada gambar 3.19 melakukan pengeditan pada bagian About Us pada halaman Web utama Sinari.co.id, karena adanya pembaharuan informasi tentang perusahaan.
27 Gambar 3.20 Edit bagian Visi Misi pada Web utama sinari.co.id
Pada gambar 3.20 merupakan proses pengeditan bagian Visi dan Misi yang lama dengan Visi dan Misi yang baru. Proses pengeditan dilakukan langsung dari hostinger.
Selanjutnya melakukan penambahan dan penyesuaian menu dan tampilan sesuai dengan perubahan keinginan dari perusahaan.
28 Gambar 3.21 Coding untuk bagian Slide pada halaman Home
Pada gambar 3.21 merupakan proses pembuatan program slide pada halaman home. Untuk gambar pada slide home nantinya bisa diubah melalui Admin Panel maupun langsung dari program.
3.3.7 Minggu Ketujuh : Upload Konten
Pada minggu ketujuh ini, pekerjaan yang dilalukan adalah memasukkan konten dan informasi ke web e-commerce yang dapat dilakukan dengan 2 cara yaitu melalui fitur admin yang ada pada web, atau dengan mengubah gambar yang ada pada Coding.
29 Gambar 3.22 Input Produk Komoditas
Pada gambar 3.22 merupakan admin panel yang berfungsi untuk menambahkan produk-produk yang diinginkan.
Gambar 3.23 Pembuatan Email untuk karyawan perusahaan
30 Pada gambar 3.23 merupakan proses pembuatan email untuk seluruh
karyawan perusahaan, pembuatan ulang email dikarenakan saat migrasi web data- data email perusahaan hilang.
Karena pada sebelumnya melakukan migrasi hosting dan domain dari perusahaan yang membuat web sinari sebelumnya, maka email untuk karyawan di perusahaan hilang atau tidak bisa digunakan, oleh karena itu pada minggu ketujuh ini melakukan pembuatan email untuk semua karyawan ata permintaan dari perusahaan.
Gambar 3.24 Email untuk perusahaan yang telah selesai dibuat
Pada gambar 3.24 merupakan email perusahaan yang telah selesai dibuat, pembuatan email membutuhkan waktu yang tidak sedikit, dikarenakan email yang dibuat melalui Hostinger, tidak bisa langsung dilogin menggunakan gmail.
31 3.3.8 Minggu Kedelapan : Melakukan implementasi Full Web
Pada minggu kedelapan ini, program telah siap untuk diimplementasikan demo program dan untuk mengajarkan cara menggunakan fitur-fitur yang telah ada.
Berikut adalah implementasi full dari sisi User:
Gambar 3.25 Halaman Register
Pada gambar 3.25 merupakan halaman register, User baru diminta untuk memasukkan “Full Name” ,”Username”,”Email”,”No Telp”, dan “Password”, untuk membuat akun yang nantinya akan tersimpan sebagai data untuk perusahaan.
32 Gambar 3.26 Halaman Login
Pada gambar 3.26 merupakan halaman Login, dimana User yang sudah memiliki akun atau yang sebelumnya sudah melakukan Registrasihanya diminta untuk memasukkan “Username”, dan “Password” yang sebelumya telah terdaftar.
Gambar 3.27 Tampilan Home
33 Pada gambar 3.27 merupakan tampilan halaman utama pada web yang didesain dan dibangun untuk PT Sinari Generasi Indonesia. Pada tampilan Home ini akan full dengan Slide – Slide tentang perusahaan, pemilihan warna untuk web kita menggunakan warna putih, hitam dan kuning dengan mengikuti sesuai logo perusahaan. Sehingga tampilan web dapat terlihat menarik dan web yang dibangun sesuai dengan keinginan perusahaan yaitu web dengan desain yang sederahana.
Diharapkan dengan begitu bisnis yang terjadi pada perusahaan dapat berjalan baik dan lebih berkembang dengan adanya sebuah web yang dapat memenuhi kebutuhan pelanggan menjadi lebih efisien.
Gambar 3.28 About Us
Pada gambar 3.28 diatas merupakan halaman About Us yang merupakan halaman utama web, di halaman ini berisikan informasi secara singkat, padat, dan jelas tentang komoditas yang dijalankan oleh perusahaan, Contohnya komoditas
34 yang dimiliki, seperti cengkeh, vanilla, sehingga pelanggan yang ingin membeli produk komoditas dari PT. Sinari Generasi Indonesia dapat terbantu dengan adanya infomasi mengenai komoditas.
Gambar 3.29 Kategori Komoditas
Pada gambar 3.29 merupakan halaman kategori komoditas yang berisikan masing-masing kategori, dimana masing-masing kategori yang ada membagi setiap komoditas yang ada agar pelanggan lebih mudah dalam mencari komoditas yang diinginkan, contohnya jika pelanggan ingin membeli cengkeh, maka pelanggan hanya harus memilih komoditas pertanian. Keseluruhan dari kategori komoditas yang ada dapat di klik untuk menuju ke halaman produk yang dimana membantu memberikan apa yang dibutuhkan bagi pelanggan.
35 Gambar 3.30 Produk Komoditas pertanian
Pada gambar 3.30 merupakan tampilan produk- produk yang ada dalam kategori komoditas yang sudah dikategorikan sebelumnya. Terdapat 3 kategori yang sudah ada sebelumnya yaitu kategori komoditas pertanian, perikanan, dan kerajinan. Apabila pelanggan menginginkan produk komoditas pertanian, maka pelanggan dapat membuka pada kategori pertanian, sehingga pelanggan hanya melihat produk komoditas yang ada dalam kategori pertanian, dengan adanya kategori pelanggan dapat lebih terbantu karena kebutuhan yang mereka inginkan sudah difilter setiap produk yang dimasukkan oleh perusahaan berdasarkan tiap kategori dari suatu produk.
36 Gambar 3.31 Produk Komoditas
Gambar 3.32 Detail Produk
Pada gambar 3.32 merupakan tampilan detail dari suatu produk yang berisikan gambar beserta informasi tentang produk, seperti spesifikasi dari produk tersebut, seperti berasal dari daerah mana produk tersebut sehingga sebelum
37 pelanggan melakukan pembelian, pelanggan sudah terlebih dahulu melihat foro produk dan mendapatkan informasi dari produk tersebut. Diharapkan dengan adanya bagian specification ini guna membantu pelanggan menjadi lebih efisen dalam mencari informasi produk-produk yang mereka butuhkan.
Berikut adalah implementasi full dari sisi Admin :
Gambar 3.33 Halaman Login
Pada gambar 3.33 merupakan halam Login untuk admin, sama seperti User, admin harus melakukan Login untuk bisa masuk ke admin panel.
38 Gambar 3.34 Data User
Pada gambar 3.34 merupakan data User yang telah melakukan registrasi, data yang masuk dapat dilihat oleh perusahaan melalui admin panel pada bagian data User.
Gambar 3.35 Tambah Produk
39 Pada gambar 3.35 merupakan bagian untuk menambahkan produk, yang perlu dimasukkan adalah nama produk, keterangan produk, WhatsApp link yang akan terhubung dengan perusahaan, Upload gambar produk dan memilih kategori.
Dimana kategori harus dipilih, jika tidak dipilih makan tidak bisa diinput.
Gambar 3.36 Lihat Produk
Pada gambar 3.36 merupakan bagian untuk melihat produk apa saja yang sudah ada dan admin dapat mengedit nama, keterangan, dan gambar produk.
40 Gambar 3.37 Kategori
Pada gambar 3.37 merupakan bagian kategori dimana admin bisa menambah kategori yang baru jika ada, untuk sekarang kategori komoditas yang ada hanya pertanian, perikanan, dan kerajinan.
3.4 Kendala yang dihadapi
Masalah yang dihadapi ketika menjalankan program kerja magang di PT.
Sinari Generasi Indonesia:
a. Tidak adanya team dalam proses pembuatan program, dan tidak adanya orang di perusahaan yang bisa memberikan bantuan saat proses Coding.
b. Kurangnya pengalaman dan pengetahuan mengenai informasi tentang web i dan juga belum paham dengan hosting dan domain, sehingga kesulitan pada saat mengerjakan tugas yang diberikan pertama kali.
41 c. Pada saat program kerja magang berlangsung terjadi pandemic covid-19 sehingga orang yang masuk kantor terbatas, oleh karena itu terkadang tidak bisa langsung bertemu dengan Bapak Achmad Hisan.
3.5 Solusi atas kendala yang dihadapi
Dengan masalah yang dihadapi mahasiswa selama melakukan program kerja magang di PT. Sinari Generasi Indonesia, berikut adalah solusi untuk mengatasi kendala tersebut:
a. Meminta bantuan ke teman dan orang-orang yang mengerti dan bisa membantu mengerjakan Coding
b. Melakukan browsing melalui Google dengan bimbingan dari teman dan senior.
c. Mengumpulkan pertanyaan sebanyak mungkin agar dapat ditanyakan saat bertemu dengan Bapak Achmad Hisan, dan juga berkomunikasi melalui Whastapp dan Zoom.
