Hak cipta dan penggunaan kembali:
Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.
Copyright and reuse:
This license lets you remix, tweak, and build upon work
non-commercially, as long as you credit the origin creator
and license it on your new creations under the identical
terms.
BAB III
PELAKSANAAN KERJA MAGANG
3.1. Kedudukan dan Koordinasi
Selama melaksanakan kerja magang di CV Nukegraphic Indonesia, kedudukan yang diterima adalah sebagai Web Programmer. Koordinasi dan pengawasan dilakukan oleh Bapak Hans Hendrady selaku Supervisor dan Direktur CV Nukegraphic Indonesia. Adapun tugas yang diberikan oleh pembimbing lapangan selama melakukan kerja magang di CV Nukegraphic Indonesia, yaitu melakukan rekonstruksi pada website profil perusahaan dengan menggunakan framework Laravel.
3.2. Tugas yang Dilakukan
Selama melakukan kerja magang, tugas yang diberikan adalah, yaitu melakukan rekonstruksi website demo dimana mengubah website HTML yang telah disediakan menjadi website dengan framework Laravel yang dapat berfungsi sesuai dengan yang sudah direncanakan. Tugas rekonstruksi tersebut antara lain adalah, melakukan input data ke dalam database menggunakan CMS. Selain itu terdapat beberapa fitur informasi pada halaman menu home dapat terhubung dengan halaman lainnya. Pada halaman menu home akan memberikan informasi seputar perusahaan dan beberapa informasi singkat yang terdapat pada halaman lain website. Kemudian pada halaman about us akan diberikan informasi terkait dengan perusahaan, sejarah perusahaan, client dari perusahaan tersebut hingga struktur dari perusahaan tersebut. Website tersebut juga akan memberikan informasi mengenai
jasa yang ditawarkan dan juga produk-produk yang disediakan oleh perusahaan tersebut.
Proses rekonstruksi website dilakukan dengan menggunakan bahasa pemrograman PHP, HTML, CSS, JavaScript. Framework yang digunakan adalah Laravel yang berjalan dalam sistem operasi Windows 10 dan Code editor yang digunakan adalah Visual Studio Code. Database yang dipergunakan adalah MySQL.
Tabel 3.1 Uraian Proses Pelaksanaan Kerja Magang
Minggu ke- Pekerjaaan
1 - Menginstall framework Laravel
- Mempelajari framework Laravel
2 - Mempelajari framework Laravel
- Mencoba membuat website
3 - Memasukkan data ke CMS pada menu Home dan
About us sesuai dengan konten pada website.
4 - Memasukkan data ke CMS pada menu Investor dan Services sesuai dengan konten pada website.
5 - Memasukkan data ke CMS pada menu Products
dan News sesuai dengan konten pada website.
- Melakukan rekonstruksi website pada bagian layout dengan framework Laravel
6 - Melakukan rekonstruksi website pada bagian layout dengan framework Laravel sebagai tampilan master untuk pages yang ada
- Melakukan rekonstruksi website pada bagian pages yang merupakan halaman-halaman yang akan ditampilkan
7 - Melakukan rekonstruksi website pada bagian pages dengan framework Laravel
8 - Membuat controller website untuk memperoleh data dari database
9 - Melakukan routing agar website dapat berjalan - Membuat controller website untuk memperoleh
data dari database
10 - Melakukan perbaikan website pada bagian controller
11 - Melakukan perbaikan website pada bagian controller
12 - Melakukan perbaikan website dengan
melengkapi database dan HTML pages
13 - Melakukan perbaikan website dengan
melengkapi database dan HTML pages
14 - Finishing website
3.3. Uraian Kerja Magang 3.3.1. Perancangan
Perancangan dilakukan dengan mempelajari tampilan antarmuka yang ada pada website. Pada proses perancangan, dimulai dengan membuat flowchart dari website Cygnus, perancangan MVC (Model, View, dan Controller), struktur tabel, dan rancangan antarmuka.
A. Flowchart
Flowchart merupakan penggambaran secara grafik dari langkah-langkah dan urutan prosedur suatu program (Indrajani, 2011). Adapun flowchart dari website Cygnus dapat diuraikan sebagai berikut.
A.1 Main Flowchart pada Website
Gambar 3.1 Main Flowchart Website
Gambar 3.1 merupakan flowchart utama pada website. User ditampilkan laman Home dan pada lama tersebut user dapat berpindah ke laman yang lainnya dengan Menu Navigasi. Pada menu navigasi tersebut, terdapat menu seperti About Us, Investor, Services, Product, More, dan Home.
A.2 Flowchart Menu About Us
Gambar 3.2 Flowchart About Us
Gambar 3.2 merupakan flowchart dari menu about us. Menu about us dapat memberikan user informasi mengenai perusahaan website tersebut seperti misalnya sejarah dari perusahaan tersebut, karyawan dari perusahaan tersebut, pesan dari CEO perusahaan sampai dengan struktur dari perusahaan tersebut dan lainnya.
A.3 Flowchart Menu Investor
Gambar 3.3 Flowchart Menu Investor
Pada menu investor user dapat mendapatkan informasi mengenai informasi finansial pada perusahaan tersebut. Gambar 3.3 merupakan flowchart dari menu investor dengan sub-menu seperti Financial Report, RUPS Schedule, Share Listing Structure, Stock Information, dan Dividen Information. Data untuk menampilkan
A.4 Flowchart Menu Products
Gambar 3.4 Flowchart Menu Products
Pada Gambar 3.4 merupakan flowchart dari menu products yang menampilkan produk-produk yang disediakan oleh perusahaan. Menu products terbagi menjadi beberapa kategori yaitu dari kategori A sampai dengan kategori D.
A.5 Flowchart Menu More
Gambar 3.5 Flowchart Menu More
Flowchart pada Gambar 3.5 merupakan flowchart dari menu more. Menu tersebut menampilkan halaman news yang berisi berita-berita dan custom page layout yang merupakan halaman-halaman demo apabila terdapat klien yang berminat dengan website Cygnus ini. Setiap custom page memiliki layout yang berbeda-beda, dan klien dapat memilih halaman layout yang paling menarik untuk
B. Database Schema
Gambar 3.6 Database Schema Cygnus
Pada database tersebut terdapat 3 tabel. Gambar 3.6 menampilkan struktur database yang digunakan dalam website corporate profile yang dikembangkan.
Struktur Tabel
C. Struktur Tabel
Terdapat 3 tabel yang digunakan pada proses rekonstruksi website corporate profile. Berikut merupakan penjabaran dari struktur tabel yang digunakan.
C.1 Tabel ngc_global_posts
Tabel ini menampung konten-konten yang akan ditampilkan pada website seperti judul, subtitle, link, gambar, tanggal, dan lainnya.
Tabel 3.2 Struktur Tabel ngc_global_posts
No Nama kolom Tipe data Keterangan
1 id bigint(20) Primary key
2 lang_id smallint(6)
3 post_date date
4 post_name varchar(200)
5 post_type enum(…)
6 post_parent int(10)
7 post_title varchar(1000)
8 post_subtitle varchar(5000)
9 post_intro varchar(5000)
10 content text
11 post_banner_image varchar(500) 12 post_banner_image_high varchar(500)
13 post_image varchar(500)
14 post_image_high varchar(500)
15 video_link varchar(200)
16 post_link_text varchar(100)
17 post_link varchar(1000)
18 featured tinyint(1)
19 user_defined varchar(200)
Tabel 3.2 Struktur Tabel ngc_global_posts (Lanjutan)
No Nama kolom Tipe data Keterangan
20 urlpage varchar(500)
21 publish tinyint(1)
22 sortnumber smallint(6)
23 modified_datetime datetime 24 modified_by smallint(6)
25 cms_menu varchar(30)
C.2 Tabel ngc_sliders
Tabel ini menyimpan konten yang ditampilkan pada slider di halaman home.
Tabel 3.3 Struktur Tabel ngc_sliders
No Nama kolom Tipe data Keterangan
1 id bigint(20) Primary key
2 slider_title varchar(5000)
3 slider_content varchar(5000) 4 image_desktop varchar(2000)
5 image_mobile varchar(2000)
6 link varchar(4000)
7 publish tinyint(1)
8 sortnumber smallint(6)
9 modified_datetime datetime
10 modified_by smallint(6)
C.3 Tabel ngc_global_images
Tabel ini menyimpan gambar-gambar dan link yang digunakan lebih dari sekali.
Tabel 3.4 Struktur Tabel ngc_global_images
No Nama kolom Tipe data Keterangan
1 id int(11) Primary key
2 lang_id tinyint(2)
3 name varchar(200)
4 type varchar(15)
5 description varchar(5000)
6 image varchar(200)
7 image_high varchar(200)
8 link varchar(200)
9 link_text varchar(200)
10 link_target varchar(15)
11 urlpage varchar(200)
12 publish tinyint(1)
13 sortnumber int(11)
14 modified_datetime datetime 15 modified_by tinyint(2)
16 cms_menu varchar(30)
D. Implementasi
Pada proses implementasi, tahap awal yang dikerjakan adalah menu home.
Gambar 3.7 merupakan tampilan dari menu home, dimulai dari header, sliders, intro, products, clients, news, dan yang paling bawah merupakan footer.
Gambar 3.7 Tampilan pada Halaman Home
Gambar 3.8 Tampilan pada Halaman Company Value
Gambar 3.9 Tampilan pada Halaman Company Value (Lanjutan)
Gambar 3.8 dan Gambar 3.9 merupakan tampilan dari menu company value yang menampilkan informasi mengenai perusahaan tersebut seperti misalnya visi dan misi, daya jual yang unik dari perusahaan, dan lainnya.
Menu company history memberikan informasi mengenai sejarah berdirinya perusahaan tersebut. Seperti pada Gambar 3.10, halaman company history dimulai dengan intro dan kemudian dilanjutkan dengan milestones yang menunjukkan bagaimana berdirinya perusahaan tersebut secara bertahap.
Gambar 3.11 Tampilan pada Halaman Our Team
Dapat dilihat pada Gambar 3.11, halaman our team memperkenalkan user dengan tim dibalik perusahaan tersebut, dimana beberapa dari divisi tersebut adalah creative team, marketing team, dan developer team.
Gambar 3.12 Tampilan pada Halaman Our Clients
Gambar 3.12 merupakan halaman our clients yang menampilkan klien-klien yang bekerja sama dengan perusahaan tersebut.
Gambar 3.13 Tampilan pada Halaman Management
Dapat dilihat pada Gambar 3.13, halaman management juga mengenalkan user kepada orang yang bekerja dibalik perusahaan tersebut Seperti halnya dengan halaman our team. Tetapi halaman management menampilkan orang-orang yang memiliki tanggung jawab yang lebih besar seperti contohnya Board of Commissioners dan Board of Directors.
Gambar 3.14 Tampilan pada Halaman CEO Message
Gambar 3.14 merupakan halaman CEO Message memberikan ruang kepada CEO untuk menyampaikan pesannya kepada user yang mengunjungi website tersebut.
Gambar 3.15 Tampilan pada Halaman Tata Kelola Perusahaan
Seperti yang dapat dilihat pada Gambar 3.15, Halaman tata kelola perusahaan menyimpan file yang berkaitan dengan aturan atau kebijakan pada perusahaan tersebut seperti misalnya anggaran perusahaan, kode etik perusahaan,
komite audit, audit internal, sekretaris perusahaan, fungsi nominasi dan enumerasi, dan manajemen resiko.
Gambar 3.16 Tampilan pada Halaman Corporate Social Responsibility Gambar 3.16 adalah halaman corporate social responsibility yang merupakan halaman pada website perusahaan ini yang menampilkan tindakan- tindakan yang dapat dilakukan perusahaan tersebut agar meningkatkan kesejahteraan masyarakat sosial.
Gambar 3.17 Tampilan pada Halaman Company Structure
Halaman company structure menampilkan struktur dari perusahaan tersebut. Gambar 3.17 menampilkan divisi-divisi dari sebuah perusahaan yang dipimpin oleh General Manager.
Gambar 3.18 Tampilan pada Halaman Business Unit
Gambar 3.18 menampilkan perusahaan apa saja yang mempunyai kepemilikan
Gambar 3.19 Tampilan pada Halaman Financial Report
Halaman financial report memberikan laporan mengenai keadaan finansial pada perusahaan. Laporan tersebut diunggah berdasarkan tahunnya dan disajikan dalam bentuk pdf, seperti yang dapat dilihat pada Gambar 3.19.
Gambar 3.20 Tampilan pada Halaman RUPS
Halaman RUPS menyimpan materi-materi yang digunakan pada saat rapat umum pemegang saham. Gambar 3.20 menunjukkan bahwa materi-materi rapat yang sudah di-upload dapat dilihat dan di-download lagi.
Gambar 3.21 Tampilan pada Halaman Share Listing Structure
Gambar 3.21 merupakan tampilan dari halaman share listing structure yang memberikan informasi mengenai jumlah kepemilikan saham.
Halaman stock information menampilkan status kepemilikan saham setiap harinya. Dapat dilihat pada Gambar 3.22, chronology of shares recording menampilkan kronologi pemegang saham dari tahun ke tahun, sedangkan pada shares pricing data per quarter menampilkan informasi kepemilikan saham per kuartal di setiap tahun.
Gambar 3.23 Tampilan pada Halaman Dividend Information
Halaman dividen information menampilkan kronologi dari pembayaran yang dilakukan perusahaan tersebut kepada pemegang saham seperti pada Gambar 3.23.
Gambar 3.24 Tampilan pada Halaman Services
branding seperti pada Gambar 3.24. Selain menampilkan jasanya, halaman tersebut juga menampilkan pricing plan yang memberikan informasi mengenai paket yang bisa diambil dan juga harganya.
Gambar 3.25 Tampilan pada Halaman Products
Halaman products seperti pada Gambar 3.25, menampilkan produk-produk yang ditawarkan oleh perusahaan tersebut. Produk-produk tersebut juga dapat dibagi menjadi beberapa kategori.
Gambar 3.26 Tampilan pada Halaman News
Gambar 3.26 merupakan halaman news yang menampilkan berita-berita yang terdapat pada website tersebut. Pada halaman tersebut juga dibagi menjadi news dan blog.
Gambar 3.27 Tampilan pada Halaman Custom Page 1
Gambar 3.27 merupakan tampilan dari salah satu halaman custom page.
Halaman custom page berfungsi sebagai halaman demo atau contoh apabila terdapat klien yang ingin menggunakan website Cygnus tersebut untuk menampilkan kontennya. Setiap halaman custom page memiliki style yang berbeda-beda. Apabila terdapat klien yang tertarik dengan website tersebut, maka konten dapat diatur sesuai dengan kehendak klien tersebut.
Gambar 3.28 Tampilan pada Halaman Custom Page 2
Gambar 3.28 merupakan tampilan dari halaman custom page 2. Halaman custom page 2 juga berfungsi sebagai halaman demo atau contoh apabila terdapat klien yang ingin menggunakan website Cygnus tersebut untuk menampilkan kontennya. Setiap halaman custom page memiliki style yang berbeda-beda.
Gambar 3.29 Tampilan pada Halaman Custom Page 2 (Lanjutan)
Gambar 3.30 Tampilan pada Halaman Custom Page 3
Gambar 3.30 merupakan tampilan dari halaman custom page 3. Seperti halnya dengan halaman custom page sebelumnya, Halaman custom page 3 juga berfungsi sebagai halaman demo atau contoh apabila terdapat klien yang ingin
Gambar 3.31 Tampilan pada Halaman Custom Page 4
Gambar 3.31 merupakan halaman custom page 4 yang berfungsi sebagai demo untuk klien yang tertarik dalam menggunakan website ini. Perbedaannya terletak pada posisi dan style content.
Gambar 3.32 Tampilan pada Halaman Custom Page 5
Gambar 3.32 merupakan halaman custom page 5 yang berfungsi sebagai demo untuk klien yang tertarik dalam menggunakan website ini. Perbedaannya
Gambar 3.33 Tampilan pada Halaman Custom Page 6
Gambar 3.33 merupakan halaman custom page 6 yang berfungsi sebagai demo untuk klien yang tertarik dalam menggunakan website ini. Perbedaannya terletak pada posisi dan style content.
3.3.2 Kendala yang Ditemukan
Terdapat beberapa kendala yang ditemukan pada saat melaksanakan praktek kerja magang di CV Nukegraphic Indonesia yaitu kurangnya pemahaman terhadap framework Laravel yang digunakan. Salah satu dari kendala tersebut adalah kesulitan dalam melakukan routing pada website dikerjakan.
3.3.3 Solusi atas Kendala yang Ditemukan
Dari kendala yang ditemui pada saat pelaksanaan kerja magang, maka solusi yang ditemukan adalah mempelajari framework Laravel lebih dalam serta bertanya kepada rekan kerja dan teman-teman yang kiranya dapat memberi bantuan kepada penulis dalam menyelesaikan proyeknya.