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
Posisi yang diberikan dalam pelaksanaan kerja magang di PT. Merah Putih Media adalah sebagai web developer yang ditugaskan di KamiBijak. Tugas yang diberikan adalah mengembangkan dan memperbaharui website KamiBijak yang telah ada. Kerja magang dikoordinasikan oleh Bapak Rusmanto selaku Head Of Information Technology Department dan Bapak Paulus selaku Head dari KamiBijak.
Secara berkala Bapak Rusmanto dan Bapak Paulus memonitor progress dari website yang dikerjakan. Jika menemukan kesulitan dapat menanyakan secara langsung kepada karyawan Information Techonogy lain yang ada di perusahaan media tersebut.
3.2 Tugas yang Dilakukan
Selama melakukan kerja magang di PT.Merah Putih Media selama tiga bulan, tugas yang harus dikerjakan adalah mengembangkan website KamiBijak dengan merancang dan membangun ulang website tersebut dari wordpress ke laravel.
Selain melakukan coding untuk merancang dan membangun ulang wesbite KamiBijak, juga diberikan tugas untuk membuat ulang database, UI untuk admin dan lain-lain.
Pada Tabel 3.1 dapat dilihat rangkaian tugas-tugas yang dikerjakan selama pelaksanaan magang di PT. Merah Putih Media. Berikut tabel uraian tugas per minggu yang dilakukan
Tabel 3.1 Uraian Tugas per Minggu
Pada minggu pertama, berkeliling kantor untuk diperkenalkan dengan karyawan yang bertugas di lapangan serta project yang harus dikerjakan bersama dengan tim. Project tersebut adalah membuat ulang website KamiBijak dengan menggunakan framework laravel.
Minggu Keterangan
1 - Pengenalan kantor dan projectnya
2 - Mempelajari dan mencatat keperluan projectnya - Merancang database
3 - Mempelajari laravel 4 - Merancang database
- Pembuatan project sederhana di laravel
5 - Mencatat fitur apa saja yang dipakai di website sebelumnya
6 - Pembuatan CRUD dengan laravel - Testing
7 1. Pembetulan error
2. Pada Create, edit dan controller menambahkan fungsi tag dengan placeholder
8 3. Testing
4. Pembetulan error
9 5. Pembuatan Tampilan admin
6. Pembuatan fitur aktif tidaknya artikel 10 7. Testing
8. Pembetulan error
11 9. Pembuatan fitur download artikel dengan excel 10. Testing
12 11.Pembetulan error 12.Merapikan source code 13 13.Penambahan fitur highlights
14. Testing
14 15.Pembetulan error
16.Penggabungan admin dan user 15 17.Testing dan Pembetulan error 16 18.Pembetulan error
19.Pembuatan login 17 20. Testing
21.Pembetulan error
Pada minggu kedua, mempelajari project tersebut bedasarkan website yang sudah ada sebelumnya dan mencatat keperluan dari website KamiBijak serta mulai merancang database.
Pada minggu ketiga, mempelajari tentang framework laravel melalui dokumentasi dan berkonsultasi kepada senior IT di kantor tersebut supaya terbiasa menggunakan laravel dalam pembuatan website.
Pada minggu keempat, merancang ulang database yang sudah ada sesuai kebutuhan website KamiBijak dan membuat project laravel sederhana untuk dijadikan website admin sesuai dengan yang diinginkan.
Pada minggu kelima, mencatat kembali fitur-fitur apa saja yang diperlukan di dalam website sesuai dengan kebutuhan sebelumnya dan memastikan lagi bahwa sudah sesuai dengan yang diberitahu oleh kantor.
Pada minggu keenam, menambahkan project sederhana yang telah dibuat pada minggu keempat yaitu menu create, read (dapat menampilkan), update, edit dan delete. Serta dilakukan testing untuk mengetahui kekurangan-kekurangan yang ada.
Pada minggu ketujuh, perbaikan error setelah di minggu keenam melakukan testing dan terdeteksi bug dan error. Serta adanya penambahan fungsi tag pada create dan edit yang membuat controller nya harus diubah.
Pada minggu kedelapan, dilakukan testing terhadap fitur yang ditambahkan di minggu keenam serta memperbaiki bug dan error yang ditemukan.
Pada minggu kesembilan, membuat tampilan admin yang sederhana sesuai kebutuhan. Serta membuat fitur aktif tidaknya berita pada halaman create, edit dan controller.
Pada minggu kesepuluh, dilakukan testing kembali terhadap fitur yang ditambahkan di minggu kesembilan serta memperbaiki bug dan error yang ditemukan.
Pada minggu kesebelas, membuat fitur tambahan download data artikel dengan excel untuk mempermudah admin melihat data-data berita yang telah ditulis. Serta dilakukan testing.
Pada minggu kedua belas, melakukan perbaikan error sehingga fitur dapat berjalan dengan lancar serta merapikan source code dan halaman web dengan menggunakan prefix.
Pada minggu ketiga belas, diminta menambahkan fitur highlights pada create, edit, dan controller. Kemudian testing dilakukan kembali, untuk mengetahui ada bug atau tidak.
Pada minggu keempat belas, melakukan perbaikan bug dan menggabungkan source code bagian admin dengan source code pada bagian user.
Pada minggu kelima belas dan enam belas, dilakukan testing terhadap coding yang telah digabungkan dan memperbaiki bug dan error yang ditemukan. Serta melakukan pembuatan fitur login.
Pada minggu ketujuh belas, dilakukan testing kembali serta perbaikan bug dan error yang ditemukan sampai berjalan dengan lancar.
3.3 Uraian Pelaksanaan Kerja Magang
Dalam pelaksanaannya website KamiBijak dibagi menjadi beberapa bagian dan dijelaskan dalam proses pelaksanaan, flowchart, ER, rancangan UI, dan database schema.
3.3.1 Proses Pelaksanaan
Pembuatan Website KamiBijak menggunakan perangkat lunak dan perangkat keras. Perangkat lunak yang digunakan akan dijabarkan sebagai berikut.
1. Operating System Windows 8.1 64-bit.
2. Google Chrome 70.0.3538.77 64-bit 3. Sublime Versi 3
4. Laravel versi 3 5. Xampp
Sedangkan perangkat keras yang digunakan untuk pengembangan akan dijabarkan sebagai berikut.
1. Acer Aspire
2. Procesor core i5 1.6 GHz 3. Ram 4GB
4. Graphics Intel Nvidia Geforce
3.3.2 Flowchart
Adapun alur dari aplikasi yang dikembangkan di gambarkan dalam flowchart seperti yang terlihat pada Gambar 3.1 hingga Gambar 3.4. Flowchart dibagi menjadi lima yaitu,, flowchart Login, flowchart Menu Admin, flowchart Create, dan flowchart Edit.
A. Flowchart Login
Pada bagian admin website KamiBijak sebelum masuk ke halaman menu admin, terdapat tampilan login. Pada bagian ini admin diminta untuk memasukkan email dan password yang telah terdaftar untuk dapat masuk sebagai admin pada
website KamiBijak. Apabila tidak sesuai maka akan ditolak dan diminta untuk memasukkan email dan password kembali.
Gambar 3.1 Flowchart Login
B. Flowchart Menu Admin
Menu admin merupakan menu yang diakses oleh admin yang telah terautentifikasi masuk ke halaman ini. Dalam proses ini, admin dapat memilih beberapa menu utama yang ada. Pilihan menunya mulai dari dashboard, charts, forms untuk membuat artikel baru ataupun untuk mengedit artikel, tabel untuk menampilkan berita yang telah disimpan, serta calendar
Gambar 3.2 Flowchart Menu Admin C. Flowchart Menu Create
Menu Create merupakan proses dengan tampilan awal berupa form untuk menginput berita atau artikel ke dalam database dengan disertai slug yang akan muncul secara otomatis apabila admin memasukan judul dari artikel atau berita tersebut. Setelah semua telah dimasukan apabila tidak jadi disimpan akan masuk ke menu admin kembali dan apabila disimpan akan masuk kedalam tabel berita.
Gambar 3.3 Flowchart Menu Create D. Flowchart Menu Editor
Menu Editor merupakan bagian dari form, yang di dalamnya berisi berita atau artikel singkat dan di setiap artikel atau berita terdapat action berupa pilihan edit atau hapus. Apabila memilih hapus maka artikel atau berita tersebut terhapus dan apabila memilih edit maka akan masuk ke dalam sebuah forms. Forms tersebut sudah berisikan berita yang ada sebelumnya yang diambil dari database, dan siap untuk diedit. Serta apabila disimpan maka akan kembali ke dalam menu editor.
Gambar 3.4 Flowchart Menu Editor
3.3.3 Entity Relationship Diagram
Pada gambar 3.5 merupakan gambaran alur kerja dari website KamiBijak di bagian admin. Di mana 1 admin dapat mengedit banyak (n) berita, 1 admin dapat memasukkan banyak (n) berita, 1 admin dapat mempublish banyak (n) berita, dan begitu juga sebaliknya. Serta 1 berita memiliki banyak (n) tags.
Gambar 3.5 Entity Relationship Diagram
3.3.4 Database Schema
Gambar 3.6 Database Schema 3.3.5 Struktur Table
A. Table migration
Tabel 3 1 Table Migration
Field Type Null Key Default Extra
id int(10) unsigned NO PRI NULL auto_increment
migration varchar(191) NO NULL
batch int(11) NO NULL
B. Table posts
Tabel 3.2 Table Post
Field Type Null Key Default Extra id int(10) unsigned NO PRI NULL auto_increment title varchar(191) NO NULL
category text NO NULL content text NO NULL embed varchar(191) NO NULL publisher text NO NULL created_at timestamp YES NULL updated_at timestamp YES NULL cont_sum text NO NULL
featured tinyint(1) NO 0
status tinyint(1) NO 0
slug varchar(191) NO NULL
viewed int(11) YES NULL
deleted_at timestamp YES NULL C. Table password_resets
Tabel 3.3 Table Password_resets
Field Type Null Key Default Extra
email varchar(191) NO MUL NULL
token varchar(191) NO NULL
created_at timestamp YES NULL
D. Table tags
Tabel 3 4 Table tags
Field Type Null Key Default Extra
id int(10) unsigned NO PRI NULL auto_increment
name varchar(191) NO NULL
description text NO NULL
created_at timestamp YES NULL updated_at timestamp YES NULL E. Table tag_chains
Tabel 3 5 Table tag_chains
Field Type Null Key Default Extra
id bigint(120) unsigned NO PRI NULL post_id int(10) unsigned NO MUL NULL tag_id int(10) unsigned NO MUL NULL created_at timestamp YES NULL
Field Type Null Key Default Extra updated_at timestamp YES NULL
Tabel 3.5 Table tag_chains(lanjutan) F. Table Users
Tabel 3 6 Table users
Field Type Null Key Default Extra
id
bigint(120)
unsigned NO PRI NULL auto_increment
name varchar(191) NO NULL
email varchar(191) NO UNI NULL
email_verified_at timestamp YES NULL
password varchar(191) NO NULL
remember_token varchar(100) YES NULL created_at timestamp YES NULL updated_at timestamp YES NULL 3.3.6 Perancangan Antarmuka website
Berikut merupakan rancangan antarmuka halaman menu admin yang terbagi menjadi beberapa halaman menu, diantaranya sebagai berikut.
A. Menu Login
Pada Gambar 3.7 menampilkan rancangan halaman antarmuka login, disini admin harus memasukan email dan password yang telah terdaftar. Kemudian klik tombol login untuk masuk kedalam menu admin.
Gambar 3.7 Rancangan Halaman Menu Login B. Menu Admin
Pada Gambar 3.8 merupakan rancangan halaman antarmuka untuk bagian admin, di mana terdapat beberapa halaman yang dapat dipilih oleh admin.
Gambar 3.8 Rancangan Halaman Menu Admin C. Menu Create
Gambar 3.9 merupakan rancangan halaman antarmuka berupa forms untuk memasukan berita atau artikel. Di dalam forms tersebut ditambahkan beberapa fitur untuk menaikkan berita.
Gambar 3.9 Rancangan Halaman Menu Create D. Menu List Editor
Pada Gambar 3.10 merupakan rancangan halaman antarmuka untuk mengetahui isi berita secara singkat dan terdapat tombol hapus serta edit.
Gambar 3.10 Rancangan Halaman Menu List Editor E. Menu Show
Gambar 3.11 merupakan rancangan halaman antarmuka yang berisi berita secara lengkap yang akan muncul apabila berita yang ada pada menu List Editor diklik.
Gambar 3.11 Rancangan Halaman Menu Show F. Menu Edit
Pada Gambar 3.12 merupakan rancangan halaman antarmuka edit, di mana admin dapat mengubah isi atau pun bagian dari artikel yang telah tersimpan.
Gambar 3.12 Rancangan Halaman Menu Edit G. Menu List Table
Menu List Table merupakan rancanngan halaman antarmuka untuk melihat berita apa saja yang telah ditulis, aktif ataupun sedang highlights dalam bentuk table.
Gambar 3.13 Rancangan Halaman Menu ListTable
3.4 Kendala yang Ditemukan
Pada kerja magang yang telah dilakukan terdapat kendala yang ditemukan, antara lain:
1. Kurangnya pengalaman untuk membuat tampilan admin.
2. Kurang komunikasi dalam analisis kebutuhan dengan tim dan head IT.
3. Kurangnya pengetahuan mengenai laravel.
3.5 Solusi atas Kendala yang Ditemukan
Dari kendala yang ada, terdapat beberapa solusi, diantaranya adalah
1. Mencari sendiri dan meminta bantuan pada yang lebih mengerti tampilan
2. Lebih sering berkomunikasi dan memperlihatkan progress.
3. Mencari pembelajaran di internet dan bertanya pada web developer lain untuk belajar menggunakan laravel.