Rancang Bangun Website Company Profile pada PT Ipsi Karya Abadi

(1)

BAB 3

PELAKSANAAN KERJA MAGANG

3.1 Kedudukan dan Organisasi

Pelaksanaan kegiatan magang yang dilakukan di PT Ipsi Karya Abadi dengan jabatan sebagai front-end developer interndilakukan dibawah pengawasan Bapak Arie Pratikno selaku Direktur Utama sekaligus supervisi yang memiliki tugas membimbing dan mengawasi proses kegiatan magang dari awal hingga akhir.

Koordinasi diberikan oleh Pak Arie untuk informasi dan kriteria pembangunan website yang diinginkan. Setiap satu minggu sekali dilakukan meeting terkait progres yang dilaksanakan secaraonline. Pembuatanwebsitemenggunakangithub untuk menggabungkan pengerjaan tugas masing-masing anggota.

3.2 Tugas yang Dilakukan

Selama menjalani praktik kerja magang di PT Ipsi Karya Abadi sebagaiWeb Developer Intern, tugas yang diberikan adalah membuat website company profile PT Ipsi Karya Abadi dengan menggunakan teknologi yang sudah ditentukan seperti framework laravel, react, dantailwind CSS. Berikut adalah tugas yang dikerjakan selama magang berlangsung:

1. Memahami informasi tentangprofileperusahaan.

2. Menentukan requirements yang dibutuhkan dalam website yang akan dirancang.

3. Mempelajari dan memahamiframework laravel,react, dantailwind CSS.

4. Membuatflowchartuntukwebsite company profileperusahaan.

5. Membuatsitemapuntukwebsite company profileperusahaan.

6. Membuatwireframeuntukwebsite company profileperusahaan.

7. Membuatfront-end website sesuai denganflowchart, sitemapdanwireframe yang sudah dibuat.

(2)

3.3 Uraian Pelaksanaan Magang

Pelaksanaan magang dilakukan selama kurang dari 5 bulan, tugas magang ini dikerjakan secaraonlineatauWork From Home, dengan waktu pengerjaan yang fleksibel, namun umumnya dilakukan dari pukul 08.00 hingga 17.00. Tugas yang dilakukan selama magang akan diuraikan seperti pada Tabel 3.1.

Tabel 3.1. Pekerjaan yang dilakukan tiap minggu selama pelaksanaan kerja magang Minggu Ke - Pekerjaan yang dilakukan

1 • Memahami informasi tentang perusahaan.

• Menentukanrequirement websiteyang akan dibuat.

2 • Penjelasan gambaranwebsiteyang ingin dibuat.

• Membuat flowchart untuk menggambarkan aliran navigasi.

(3.3.1.A)

3 • Memperbaikiflowchart. (3.3.1.A)

• Diskusi mengenai bahasa pemograman, dan framework yang akan digunakan.

• Mempelajariframework laraveldanReact.

4 • Melanjutkan pembelajaranframework laraveldanReact.

• Mencari referensiwebsite company profile.

5 • Mencari dan mempelajari framework CSS untuk membantu pembuatanwebsite.

• Membuatsitemapuntukwebsiteyang akan dibuat. (3.3.1.B)

• Membuat dummy homepage dengan framework yang sudah ditentukan.

7

Rancang Bangun Website..., Ferdy Willy, Universitas Multimedia Nusantara

(3)

Tabel 3.1. Pekerjaan yang dilakukan tiap minggu selama pelaksanaan kerja magang (lanjutan)

6 • Melanjutkan pembuatan dummy homepage dengan framework yang sudah ditentukan.

• Melanjutkan pembelajaran menggabungkan framework laravel, react, dantailwind CSS.

7 • Membuatwireframeuntukwebsiteyang akan dibuat. (3.3.1.C)

• Merevisi tampilan halamanhomepage. (3.3.2.A)

8 • Membuat dan memasukan kode ke dalam github untuk memudahkan kerja sama dalam tim.

• Mengambil data dari database dan menampilkannya pada halamanwebsite.

9 • Membuat tampilan halaman login untuk admin. (3.3.2.F)

• Menghubungkan halamanhomepagedengan halamanlogin.

• Membuat tampilan halamandashboard adminberupainput field untuk CRUD. (3.3.2.G)

10 • Memperbaiki tampilan halamandashboard.

• Membuat tampilan halaman editdashboard. (3.3.2.H)

• Membuat tampilanalertketika proses CRUD berhasil.

• Membuat fiturdropdownpadanavigation bar.

11 • Melanjutkan pembuatan fiturdropdownmenjadiresponsive.

• Membuatcarouseldi halamanhomepage.

12 • Memperbaikicarousel.

• Membuat tampilanfootersecararesponsive.

• Membuat tampilan halamanabout us.(3.3.2.E) 13 • Melanjutkan pembuatan tampilan halamanabout us.

• Membuat animasi ketika discroll.

• Membuat tampilan testimoni dalam bentukcard.

(4)

Tabel 3.1. Pekerjaan yang dilakukan tiap minggu selama pelaksanaan kerja magang (lanjutan)

14 • Melanjutkan pembuatan animasi ketika discroll.

• Membuat tampilan list produk di halaman product dalam bentuk card.

15 • Melakukan perubahan tampilancardpada list produk di halaman product. (3.3.2.C)

• Merubah tampilan list produk di dashboard admin ke dalam bentuk tabel.

16 • Menerapkan fitur paginationuntuk menampilkan list produk di halaman product. (3.3.2.C)

• Membuat tampilan detail product untuk menampilkan nama produk, kategori produk, deskripsi produk, dan gambar produk.

(3.3.2.D)

17 • Melanjutkan pembuatan tampilan detail product.

• Membuat tampilan validasi ketika user mengisi form dan tampilanalertketika user berhasil mengisi form.

3.3.1 Perancangan Website

Website dibangun dengan bertahap agar sesuai dengan ketentuan dan kebutuhan yang telah diberikan. Perancangan website dilakukan dengan menggunakanflowchart,sitemap, danwireframe.

9

(5)

A. Flowchart

Gambar 3.1. Flowchart Website

Pada Gambar 3.1 merupakan flowchart dari alur website company profile.

Ketika pertama kali usermembuka website, user akan diarahkan kepada tampilan homepage. Pada tampilan homepage terdapatnavbar yang berisi pilihan halaman lainnya seperti: Service, Product, About US, dan Login. Pada halaman product terdapat beberapa list produk yang bisa diedit melalui admin dashboard. Pada halaman about us user dapat menyampaikan pesan kepada perusahaan. Pada halamanloginuser akan memasukkanIDdanPassworduntuk memasuki halaman dashboard admin.

(6)

Gambar 3.2.Flowchart Dashboard Admin

11RancangBangunWebsite...,FerdyWilly,UniversitasMultimediaNusantara

(7)

Pada Gambar 3.2 merupakan flowchart pada dashboard admin. Setelah admin berhasil login, pada halaman dashboard akan ditampilkan beberapa list produk. Pada dashboard ini, admin bisa melakukan penambahan produk baru, mengubah informasi produk yang sudah ada, menghapus produk dari list, mengembalikan produk ke dalam list, menghapus data produk dari database, mengelola gambar carousel, mengelola testimony, melihat pesan yang dikirim oleh user, mengubah informasi akun, dan menghapus akun.

(8)

B. Sitemap

Gambar 3.3. Sitemap

Pada Gambar 3.3 merupakansitemapyang berisikan struktur halaman pada website company profile PT Ipsi Karya Abadi. Selain itu, pada gambar tersebut

13

(9)

menunjukkan perpindahan yang dapat dilakukan dari satu halaman ke halaman lainnya. Dimana tiap halaman menampilkan informasi yang berbeda.

C. Wireframe

Gambar 3.4.Wireframe Homepage

Pada Gambar 3.4 merupakanwireframetampilan untuk halamanHomeyang berfungsi menampilkannavbar menu, gambar-gambar tentangprofileperusahaan, beberapa jasaservice, produk yang dijual perusahaan, testimoni dari beberapaclient yang sudah bekerja sama, dan sebuahfooter.

(10)

Gambar 3.5. Wireframe Service

Pada Gambar 3.5 merupakan wireframe tampilan untuk halaman Service yang menampilkan banner tentang servis tersebut, penjelasan singkat tentang servis yang diberikan, dan sebuahbuttonyang dihubungkan langsung kewhatsapp perusahaan yang berfungsi membantu customer yang ingin memesan service tersebut.

15

(11)

Gambar 3.6. Wireframe Product

Pada Gambar 3.6 merupakan wireframe tampilan untuk halaman Product yang menampilkan produk-produk yang dijual oleh perusahaan dalam bentukcard.

dalam card tersebut juga berisikan sebuah button yang langsung menghubungkan customerkewhatsappperusahaan.

(12)

Gambar 3.7.Wireframe About Us

Pada Gambar 3.7 merupakanwireframetampilan untuk halamanAbout Us yang menampilkan informasi singkat tentang perusahaan, visi dan misi perusahaan, lokasi perusahaan, dan box message yang berfungsi untuk memberikan pesan kepada perusahaan. Pesan tersebut akan masuk ke dalam database dan bisa ditampilkan didashboard admin.

17

(13)

Gambar 3.8. Wireframe Dashboard Admin

Pada Gambar 3.8 merupakanwireframetampilan untuk halamanDashboard Admin yang menampilkan form untuk menambahkan produk baru yang akan ditampilkan di halaman product, dan menampilkan produk-produk yang terdapat didalam list yang bisa diedit dan dihapus dari list.

3.3.2 Hasil Implementasi

Berdasarkan hasil dari perancangan website yang sudah dilakukan, dibangunlah sebuahwebsite company profilePT Ipsi Karya Abadi. Berikut adalah hasil implementasinya.

(14)

A. HalamanHomepage

Gambar 3.9. Tampilan HalamanHomepage

Gambar 3.10. Tampilan HalamanHomepagelanjutan

19

(15)

Pada Gambar 3.9 sampai Gambar 3.12 merupakan tampilan yang muncul pertama kali saatusermemasukiwebsite. Pada halaman ini terdapatnavbar header yang berisi logo perusahaan, menuHome,Services,Products,About US, danLogin dimana ketika menu tersebut diklik maka akan pindah kehalaman menu tersebut.

diHomepagejuga terdapat sebuahcarouseltentang foto-foto perusahaan, beberapa servicesyang dimiliki perusahaan, beberapa produk baru, testimoni dari beberapa clientperusahaan danfooter.

(16)

B. HalamanService

Gambar 3.13. Tampilan HalamanService

Pada Gambar 3.13 merupakan tampilan halaman service yang berisikan penjelasan tentang servis yang tersedia dia perusahaan PT Ipsi Karya Abadi. Bagian servicetersebut berupa poin-poin ditampilkan dengan caradropdown.

21

(17)

C. HalamanProduct

Gambar 3.14. Tampilan HalamanProduct

Pada Gambar 3.14 merupakan tampilan product yang berisikan produk- produk yang dijual oleh perusahaan dalam bentuk card. Pada card tersebut berisikan gambar produk, nama produk, kategori produk, dan sedikit deskripsi produk. Selain itu terdapat sebuah tombol yang mengarah ke halaman detail produk tersebut. Produk tersebut hanya ditampilkan delapan buah per halaman sesuai dengan desainpagination.

(18)

D. HalamanDetail Product

Gambar 3.15. Tampilan HalamanDetail Product

Pada Gambar 3.15 merupakan tampilandetail productyang berisikan nama produk, kategori produk, deskripsi produk yang lebih lengkap dan sebuah button yang langsung terhubung kewhatsappperusahaan.

23

(19)

E. HalamanAbout US

Gambar 3.16. Tampilan HalamanAbout US

Gambar 3.17. Tampilan HalamanAbout USlanjutan

(20)

25

(21)

Pada Gambar 3.16 sampai Gambar 3.20 merupakan tampilanabout usyang berisikan penjelasan singkat tentang perusahaan, visi dan misi perusahaan, lokasi perusahaan, tombol yang langsung mengarahkan kegoogle mapslokasi perusahaan, dan sebuah form untuk memberikan pesan kepada perusahaan dan pesannya akan masuk pada bagian admin.

F. HalamanLogin

Gambar 3.21. Tampilan HalamanLogin

Pada Gambar 3.21 merupakan tampilan yang muncul sebelum admin memasuki halaman dashboard admin. Halaman login ini berfungsi untuk

(22)

membatasi akses user ke dalam halaman admin. pada halaman ini, admin akan memasukkanIDdanpassworduntuk mengakses halamandashboard admin.

G. HalamanDashboard Admin

Gambar 3.22. Tampilan HalamanDashboard Admin

Gambar 3.23. Tampilan HalamanDashboard Adminlanjutan

Pada Gambar 3.23 merupakan tampilan yang muncul saat admin mengakses halamandashboard admin. Pada halaman ini, terdapatformuntuk menambahkan produk baru, dan beberapa list produk yang sudah ditambahkan oleh admin.

List produk di tampilkan dalam bentuk tabel yang berisikan id, nama, deskripsi, kategori, gambar, dan aksi untukeditdandeleteproduk dari list.

27

(23)

H. HalamanEdit Dashboard Admin

Gambar 3.24. Tampilan HalamanEdit Dashboard Admin

Pada Gambar 3.24 merupakan tampilan yang muncul saat admin mengakses halaman edit produk. Pada halaman ini terdapat form untuk mengganti nama produk, deskripsi produk, kategori produk, dan gambar produk. Dan juga terdapat tombol back untuk kembali kedashboardutama.

3.4 Kendala dan Solusi yang Ditemukan

Kendala yang ditemukan selama proses magang di PT Ipsi Karya Abadi adalah sebagai berikut:

1. Komunikasi yang cukup terkendala saat proses magang berlangsung.

2. Kurangnya ide desain untuk mengembangkanwebsite.

3. Kurangnya pengetahuan tentang framework laravel dan react sehingga menghambat proses pengerjaan.

Solusi yang ditemukan untuk mengatasi kendala tersebut antara lain sebagai berikut:

1. Mencatat setiap masalah yang ditemukan dan disampaikan pada meeting berikutnya.

2. Berdiskusi dengan teman dan mencari referensi ide desain di internet.

3. Mempelajari dan mengeksplor lagi mengenaiframework laraveldanreactdi internet.