PROGRAM KERJA MAGANG SEBAGAI FRONT END PROGRAMMER PADA PERUSAHAAN
BEWEI DIGITAL AGENCY (PT. HANINDO CIPTA KREASI)
LAPORAN KERJA MAGANG
Disusun Oleh:
Bhaskoro Aldianto 00000011460
PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
MARET 2020
i
PERNYATAAN
Dengan ini saya menyatakan telah melaksanakan praktek kerja magang pada:
Nama Perusahaan : PT HANINDO CIPTA KREASI
Divisi : IT
Alamat : Ruko Mendrisio, Jl. BSD Raya Utama No.19, Cihuni, Pagedangan, Tangerang, Banten Periode Magang : 1 Juli 2019 – 31 Agustus 2019
Pembimbing Magang : Hanny Setiawan
Laporan kerja magang ini adalah karya tulis saya sendiri, bukan plagiat dari karya tulis yang ditulis oleh orang lain atau lembaga lain, dan semua karya tulis orang lain atau lembaga lain yang dirujuk dalam laporan kerja magang ini telah disebutkan sumber kutipannya serta dicantumkan di Daftar Pustaka. Jika di kemudian hari terbukti ditemukan kecurangan / penyimpangan, baik dalam pelaksanaan kerja magang maupun dalam penulisan laporan kerja magang, saya bersedia menerima konsekuensi dinyatakan TIDAK LULUS untuk mata kuliah kerja magang yang telah saya tempuh dan status kesarjanaan strata satu yang sudah diterima akan dicabut.
Tangerang, 23 Maret 2020
Bhaskoro Aldianto
ii
HALAMAN PENGESAHAN
Laporan kerja magang dengan judul
“Program Kerja Magang Sebagai Front End Programmer Pada Perusahaan Bewei Digital Agency (PT. Hanindo Cipta Kreasi)”
Oleh Bhaskoro Aldianto
Telah ujikan pada hari Senin, 13 April 2020, pukul 13.00 s.d. 14.00 dan dinyatakan lulus
dengan susunan penguji sebagai berikut
Dosen Pembimbing Penguji
Wella, S.Kom., M.MSI., COBIT5. Johan Setiawan, S.Kom., M.M., M.B.A.
Disahkan oleh
Ketua Program Studi Sistem Informasi – UMN
Ririn Ikana Desanti, S.Kom., M.Kom.
iii
PROGRAM KERJA MAGANG SEBAGAI FRONT END PROGRAMMER PADA PERUSAHAAN BEWEI DIGITAL
AGENCY (PT. HANINDO CIPTA KREASI) ABSTRAK
Oleh : Bhaskoro Aldianto
Bewei Digital Agency, atau PT. Hanindo Cipta Kreasi merupakan perusahaan yang beroperasi di bidang konsultasi bisnis yang berhubungan dengan digital sejak tahun 2007. Bewei Digital Agency hanya mempunyai satu orang programmer inti dan dibantu oleh pemilik perusahaan itu sendiri jika ada pekerjaan di bidang IT. Untuk itu Bewei Digital Agency membutuhkan tenaga kerja lebih di bidang IT.
Praktek kerja magang di perusahaan Bewei Digital Agency dimulai pada tanggal 1 Juli 2019 sampai dengan 31 Agustus. Pada saat menempuh periode kerja magang di Bewei Digital Agency membutuhkan pengetahuan mengenai CMS Wordpress, Web Programming, dan React Native.
Kontribusi terhadap perusahaan yang dilakukan saat periode kerja magang di Bewei Digital Agency menghasilkan satu proyek yaitu proyek website Super Bangun Jaya Online. Proyek Super Bangun Jaya ini menghasilkan beberapa outcome yang dimulai dari localhost website karena masih dalam tahap percobaan, lalu dilanjutkan dengan linux server live website yang sudah terhubung dengan aplikasi React Native Android. Setelah presentasi prototype aplikasinya kepada pihak Super Bangun Jaya, website mengalami perubahan pada bagian UInya.
Kemudian website di jadikan live lagi setelah mengalami perubahan di localhost.
Periode magang berakhir sebelum website-nya dijadikan live kembali, proyek akan di lanjutkan oleh pihak Bewei Digital Agency sendiri beserta fitur fitur atau UI yang kemungkinan akan di ubah kembali.
Kata Kunci: CMS Wordpress, Web Programming, React Native
iv
INTERNSHIP AT BEWEI DIGITAL AGENCY (PT. HANINDO CIPTA KREASI) AS FRONT END PROGRAMMER
ABSTRACT
By : Bhaskoro Aldianto
Bewei Digital Agency, or PT. Hanindo Cipta Kreasi is a company engaged in digital business consultant since 2007. Bewei Digital Agency has only one programmer and if there is a project in the IT field, the projects is assisted by the CEO itself. This problem makes Bewei Digital Agency needs more workers in the IT field.
Internship at Bewei Digital Agency was begin on 1 July 2019 to 31 August.
During the period of internship at Bewei Digital Agency requires knowledge of CMS Wordpress, Web Programming, and React Native.
Contribution made during the internship period at Bewei Digital Agency resulted in one project, the Super Bangun Jaya Online website project. Super Bangun Jaya project produced several outcomes that started from the localhost website because it was still in an experimental phase, then continued with a linux server live website that was connected to the React Native Android application.
After the presentation of the prototype of the application to Super Bangun Jaya company, the website makes several changes in its UI. Then the website is going to online after the UI changes on localhost. The internship period ends before the website is online, the project will be continued by the Bewei Digital Agency company itself along with features or UI that will likely to be changed again.
Key words: CMS Wordpress, Web Programming, React Native
v
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa karena berkat dan karunia-Nya sehingga laporan magang dapat diselesaikan tepat waktu yang berjudul “Program Kerja magang Sebagai Font end Programmer Pada Perusahaan Bewei Digital Agency (PT. HANINDO CIPTA KREASI)”.
Dengan selesainya laporan kerja magang ini, terima kasih kepada perusahaan Bewei Digital Agency karena sudah diberikan kesempatan untuk dapat melaksanakan kerja magang sebagai Programmer.
Tidak hanya itu, ucapan terima kasih yang sebesar besarnya kepada :
1. Ibu Ririn Ikana Desanti, S.Kom., M.Kom. selaku Ketua Program Studi Sistem Informasi atas dukungan selama proses pengerjaan laporan magang sampai selesai.
2. Ibu Wella, S.Kom., M.MSI., COBIT5 yang telah memberikan bimbingan yang sangat berguna dan menuntun selama proses pengerjaan laporan magang.
3. Bapak Hanny Setiawan selaku CEO Bewei Digital Agency yang telah menerima untuk diberi kesempatan kerja magang di Bewei Digital Agency dan arahan yang diberikan untuk menyelesaikan periode kerja magang.
4. Ibu Ester Ria Ivana selaku HRD yang telah membantu dalam pengurusan surat – surat kerja magang.
5. Rekan kerja di tempat kerja magang yang telah bekerja sama dan membantu untuk meyelesaikan pekerjaan.
vi
6. Keluarga yang telah memberikan doa, dukungan, serta motivasi untuk menyelesaikan laporan magang.
vii
DAFTAR ISI
PERNYATAAN ... i
HALAMAN PENGESAHAN ... ii
ABSTRAK ... iii
ABSTRACT ... iv
KATA PENGANTAR ...v
DAFTAR ISI ... vii
DAFTAR GAMBAR ... ix
DAFTAR TABEL ...x
BAB I ...1
1.1 Latar Belakang...1
1.2 Maksud dan Tujuan Magang ...2
1.3 Waktu, Lokasi, dan Prosedur Kerja Magang...2
1.3.1 Waktu dan Lokasi Pelaksanaan Kerja Magang ...2
1.3.2 Prosedur Pelaksanaan Kerja Magang ...3
BAB II ...5
2.1 Gambaran Umum Perusahaan ...5
2.2 Visi dan Misi Perusahaan ...6
2.2.1 Visi ...6
2.2.2 Misi ...6
2.3 Struktur Organisasi Perusahaan ...7
BAB III ...8
3.1 Kedudukan dan Koordinasi ...8
3.2 Tugas yang Dilakukan ...8
3.3 Uraian Pelaksanaan Kerja Magang ...10
viii
3.3.1 Mempelajari Struktur Basic React-Native, dan Latihan Membuat
Header Pada Aplikasi ...11
3.3.2 Membuat Aplikasi User List Dengan React-Navigation ...12
3.3.3 Mempelajari Konsep Xenioo dan Waboxapp ...14
3.3.4 Membuat User Flow Diagram Database (User), dan User Flow Diagram Database (seller) Untuk Database produk Perusahaan Digital Franchise My8 (eight) ...15
3.3.5 Membuat Website Super Bangun Jaya Online Menggunakan CMS Wordpress ...16
3.3.6 Custom Template Wordpress Website Super Bangun Jaya Online Menggunakan CSS, HTML, dan PHP Untuk Mobile Web View ...18
3.3.7 Memindahkan Website Super Bangun Jaya Online dan Menghubungkan ke React Native. ...22
3.3.8 Meeting Dengan Super Bangun Jaya dan Presentasi Aplikasi ..23
3.3.9 Revisi Website Super Bangun Jaya Pasca Presentasi...23
3.4 Kendala saat Periode Magang ...26
3.5 Solusi ...26
BAB IV ...27
4.1 Kesimpulan ...27
4.2 Saran ...28
4.2.1 Saran untuk Mahasiswa ...28
4.2.2 Saran untuk Universitas ...28
4.2.3 Saran untuk Perusahaan ...29
DAFTAR PUSTAKA ...30
LAMPIRAN ...31
ix
DAFTAR GAMBAR
Gambar 2. 1 Logo Perusahaan ...5
Gambar 2. 2 Struktur Organisasi ...7
Gambar 3.3. 1 Tampilan header aplikasi latihan ...12
Gambar 3.3. 2 Tampilan aplikasi user list ...13
Gambar 3.3. 3 Tampilan aplikasi user detail ...13
Gambar 3.3. 4 Latihan pembuatan alur atau logika bot ...14
Gambar 3.3. 5 User flow diagram database user ...15
Gambar 3.3. 6 User flow diagram database seller ...16
Gambar 3.3. 7 Tampilan UI home...17
Gambar 3.3. 8 Tampilan UI home bagian bawah dan shopping cart...17
Gambar 3.3. 9 Halaman home website bagian atas ...18
Gambar 3.3. 10 Tampilan home bagian tengah dan bawah ...19
Gambar 3.3. 11 Halaman kategori kamar mandi (barang non-material) ...20
Gambar 3.3. 12 Halaman kategori perluasan bangunan (barang material) ...20
Gambar 3.3. 13 Halaman shopping cart ...21
Gambar 3.3. 14 Tampilan modal pada halaman shopping cart ...21
Gambar 3.3. 15 Tampilan halaman checkout ...22
Gambar 3.3. 16 Coding untuk membedakan barang material dan non-material ..24
Gambar 3.3. 17 Tampilan jika barang material ...25
Gambar 3.3. 18 Tampilan jika barang non-material ...25
x
DAFTAR TABEL
Tabel 3.1 Timeline Kerja Magang...10
