LAPORAN KERJA PRAKTIK PT AGSA GLOBAL NETWORK
PERANCANGAN USER INTERFACE UNTUK LANDING PAGE PINEACHIPS
SITI FAUZIAH 6103191348
PROGRAM STUDI D-III TEKNIK INFORMATIKA JURUSAN TEKNIK INFORMATIKA
POLITEKNIK NEGERI BENGKALIS BENGKALIS – RIAU
2021
i
KATA PENGANTAR
Puji dan Syukur penulis ucapkan kehadirat Tuhan Yang Maha Esa, karena berkat limpahan Rahmat dan Karunia-Nya sehingga penulis dapat menyusun laporan ini dengan baik dan tepat pada waktunya. Dalam laporan ini akan membahas mengenai Kerja Praktik (KP) yang dilaksanakan di PT. Agsa Global Network.
Adapun tujuan penulisan laporan Kerja Praktik (KP) ini adalah salah satu syarat yang harus dipenuhi oleh setiap Mahasiswa Jurusan Teknik Informatika Politeknik Negeri Bengkalis yang telah melaksanakan Kerja Praktik (KP).
Laporan Kerja Praktik ini dibuat dengan berbagai observasi dan beberapa bantuan dari berbagai pihak untuk membantu menyelesaikan tantangan dan hambatan selama melaksanakan Kerja Praktik hingga dalam mengerjakan laporan ini. Oleh karena itu, penulis mengucapkan terimakasih yang sebesar-besarnya kepada:
1. Allah SWT yang telah mencurah limpahkan Rahmat dan Karunia-Nya.
2. Orang tua dan keluarga yang telah memberikan doa dan dukungan.
3. Bapak Muhammad Nasir, M.Kom. selaku Ketua Program Studi D-III Teknik Informatika.
4. Bapak Desi Amirullah, M.T. selaku Koordiantor Pelaksanaan Kerja Praktik 5. .
6. Bapak Lipantri Mashur Gultom, M.Kom. selaku Dosen Pembimbing Kerja Praktik.
7. Bapak Muhammad Akip, A.Md. selaku pemimpin perusahaan PT Agsa Global Network.
8. Bapak Suhardi, A.Md. selaku pembimbing Kerja Praktik.
9. Karyawan PT. Agsa Global Network yang banyak membantu dan mengarahkan penulis.
10. Semua teman-teman yang telah membantu memberikan dorongan, motivasi dan semangat, sehingga penulis bisa menyelesaikan laporan ini tepat waktunya.
ii
Penulis merasa sangat bersyukur selama melaksanakan Kerja Praktik di PT Agsa Global Network, karena dengan adanya pelaksanaan Kerja Praktik ini penulis mendapatkan begitu banyak pengalaman berharga yang dapat dijadikan pegangan yang sangat berguna dan membantu di masa yang akan datang terutama di dalam dunia kerja dengan lingkup yang lebih luas.
Penulis menyadari bahwa masih terdapat banyak kekurangan pada laporan ini. Oleh karena itu penulis mengundang pembaca untuk memberikan saran serta kritik yang dapat membangun. Kritik dari pembaca sangat diharapkan untuk penyempurnaan laporan selanjutnya. Untuk itu kritik dan saran demi kesempurnaan penulisan Kerja Praktik (KP) ini sangat penulis harapkan.
Bengkalis, 31 Agustus 2021
SITI FAUZIAH 6103191348
iii
DAFTAR ISI
HALAMAN JUDUL
HALAMAN PENGESAHAN
KATA PENGANTAR ... i
DAFTAR ISI ... iii
DAFTAR GAMBAR ... v
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Tujuan ... 2
1.3 Manfaat ... 2
BAB II GAMBARAN UMUM PERUSAHAAN ... 3
2.1 Sejarah Singkat Perusahaan ... 3
2.2 Visi dan Misi ... 3
2.2.1 Visi ... 3
2.2.2 Misi ... 3
2.3 Struktur Organisasi Perusahaan ... 4
2.4 Ruang Lingkup Perusahaan ... 4
BAB III DESKRIPSI KEGIATAN SELAMA KERJA PRAKTIK ... 6
3.1 Uraian Tugas yang Dikerjakan ... 6
3.1.1 Mendesain Banner Kuliner Website Bumdes Menggunakan Figma ... 6
3.1.2 Mendesain Banner Kec. Rupat Utara, Siak Kecil, Kec. Bukit Batu, dan Bandar Laksamana ... 7
3.1.3 Membuat Website PhoneApp Landing Page ... 7
3.2 Alat dan Peralatan yang Digunakan ... 11
3.2.1 Laptop ... 11
3.2.2 Aplikasi Browser ... 11
3.3 Kendala yang Dihadapi Selama Kerja Praktik ... 12
iv
BAB IV PERANCANGAN USER INTERFACE UNTUK LANDING PAGE
PINEACHIPS ... 13
4.1 Uraian Judul ... 13
4.1.1 PineaChips ... 13
4.1.2 Landing Page ... 13
4.2 Perancangan Desain Mockup ... 14
4.2.1 Tampilan Halaman Beranda ... 14
4.2.2 Tampilan Halaman Produk ... 14
4.2.3 Tampilan Halaman Footer... 15
4.3 Pengaplikasian Desain Menjadi Tampilan UI... 16
4.3.1 Tampilan Halaman Beranda ... 16
4.3.2 Tampilan Halaman Produk ... 16
4.3.3 Tampilan Halaman Footer... 18
BAB V PENUTUP ... 19
5.1 Kesimpulan ... 19
5.2 Saran ... 19
DAFTAR PUSTAKA ... 20
v
DAFTAR GAMBAR
Gambar 2.1 Logo PT Agsa Global Network ... 3
Gambar 2.2 Struktur PT Agsa Global Network ... 4
Gambar 3.1 Mendesain Banner Kuliner menggunakan Figma ... 6
Gambar 3.2 Desain Banner Website Desa ... 7
Gambar 3.3 Membuat Website PhoneApp ... 7
Gambar 3.4 PhoneApp index.html ... 8
Gambar 3.5 PhoneApp style.css... 8
Gambar 3.6 PhoneApp responsive.css ... 9
Gambar 3.7 Hasil Website PhoneApp ... 10
Gambar 3.8 Laptop... 11
Gambar 4.1 Produk Pineachips ... 13
Gambar 4.2 Mockup Halaman Beranda ... 14
Gambar 4.3 Mockup Halaman Produk ... 15
Gambar 4.4 Mockup Halaman Footer ... 15
Gambar 4.5 Tampilan Halaman Beranda ... 16
Gambar 4.6 Tampilan Halaman Produk 1... 17
Gambar 4.7 Tampilan Halaman Produk 2... 17
Gambar 4.8 Tampilan Halaman Footer ... 18
1
1 BAB I PENDAHULUAN
1.1 Latar Belakang
Kerja Praktik merupakan salah satu mata kuliah wajib yang ditempuh di sebuah Perguruan Tinggi (PT) baik untuk tingkat sarjana maupun diploma. Di bangku perkuliahan telah diajarkan teori-teori keilmuan yang sudah menjurus ke bidang industri tertentu. Banyak sekali hal yang menjadi hambatan bagi seseorang yang belum mempunyai pengalaman kerja untuk terjun ke dunia pekerjaan, teori yang diperoleh belum tentu sama dengan praktik kerja di lapangan, dan keterbatasan waktu dan ruang yang mengakibatkan ilmu pengetahuan yang diperoleh masih terbatas. Namun, untuk memperbanyak pengalaman kerja secara langsung, maka dilakukan kerja praktik sebagai langkah yang tepat untuk mendapatkan pengalaman pekerjaan.
Dalam pelaksanaan kerja praktik, mahasiswa juga mendapatkan ilmu di luar dari teori yang didapatkan diperkuliahan.
Dikarenakan hal tersebut, maka Politeknik Negeri Bengkalis menetapkan kerja praktik agar para mahasiswa memperoleh ilmu pengetahuan yang tidak diberikan oleh kampus. Sehingga kerja praktik dapat menambah wacana,pengetahuan dan skill mahasiswa, serta mampu menyelesaikan persoalan-persoalan ilmu pengetahuan sesuai dengan teori yang di peroleh di bangku kuliah. Strategi ini memadukan proses belajar- mengajar dalam kelas dengan pembelajaran dilapangan melalui kerja nyata pada suatu perusahaan atau lembaga pengelola usaha (Panduan Kerja Praktik 2017).
PT. Agsa Global Network merupakan tempat Kerja Praktik yang mana dilaksanakan pada tanggal 5 Juli – 31 Agustus 2021. PT. Agsa Global Network berlokasi di Jalan Wonosari Tengah, Bengkalis yang mana berfungsi sebagai penyedia jasa layanan internet dedicated (Dedicated Internet Service Provider) langsung kelokasi bisnis ataupun perusahaan pelanggan. PT. Agsa Global Network menjamin tingkat kestabilan internet dan bergaransi, gratis konsultasi dimana dan kapan saja serta 24/7 customer service apabila pelanggan memiliki kesulitan.
2 1.2 Tujuan
Adapun tujuan KP adalah sebagai berikut :
1. Memberi kesempatan kepada mahasiswa untuk mengaplikasikan teori/konsep ilmu pengetahuan sesuai program studinya yang telah dipelajari di bangku kuliah pada suatu organisasi/perusahaan.
2. Memberi kesempatan kepada mahasiswa untuk memperoleh pengalaman praktis sesuai dengan pengetahuan dan keterampilan program studinya.
3. Memberi kesempatan kepada mahasiswa untuk menganalisis, mengkaji teori/konsep dengan kenyataan kegiatan penerapan ilmu pengetahuan dan keterampilan di suatu organisasi /perusahaan.
4. Menguji kemampuan mahasiswa Politeknik Bengkalis (sesuai program studi terkait) dalam pengetahuan, keterampilan dan kemampuan dalam penerapan pengetahuan dan attitude/perilaku mahasiswa dalam bekerja.
5. Mendapat umpan balik dari dunia usaha mengenai kemampuan mahasiswa dan kebutuhan dunia usaha guna pengembangan kurikulum dan proses pembelajaran bagi Politeknik Bengkalis (sesuai dengan program studi terkait).
1.3 Manfaat
Sedangkan manfaat kegiatan KP bagi mahasiswa dan Politeknik Bengkalis yaitu:
1. Mahasiswa mendapat kesempatan untuk menerapkan ilmu pengetahuan teori/konsep dalam dunia pekerjaan secara nyata.
2. Mahasiswa memperoleh pengalaman praktis dalam menerapkan ilmu pengetahuan teori/konsep sesuai dengan program studinya.
3. Mahasiswa memperoleh kesempatan untuk dapat menganalisis masalah yang berkaitan dengan ilmu pengetahuan yang diterapkan dalam pekerjaan sesuai dengan program studinya.
4. Politeknik Bengkalis memperoleh umpan balik dari dunia pekerjaan guna pengembangan kurikulum dan proses pembelajaran.
3
2 BAB II
GAMBARAN UMUM PERUSAHAAN
2.1 Sejarah Singkat Perusahaan
Gambar 2.1Logo PT Agsa Global Network (Sumber: agnprovider.net.id)
AGN-Net merupakan salah satu perusahaan penyedia jasa layanan internet dedicated (dedicated internet service provider) yang menawarkan jasa untuk menyediakan internet dedicated langsung ke lokasi bisnis ataupun perusahaan yang anda kelola. Pada tahun 2021 PT Agsa Global Network menjadi salah satu ISP pertama di Kabupaten Bengkalis, sehingga dapat menyediakan jasa internet dedicated murah, yang dapat dijangkau semua kalangan. Kini AGN-Net telah berkembang dengan sangat baik karena dukungan dari para costumer, kepercayaan mereka membuat kami tumbuh besar dan kini menjadi salah satu perusahaan penyedia jasa internet dedicated di Bengkalis dan Indonesia
2.2 Visi dan Misi 2.2.1 Visi
Memberikan pelanggan solusi layanan jasa dan produk terbaik dengan mengutamakan kepuasan pelanggan yang menjadikan AGN Provider sebagai pihan utama dalam layanan jasa jaringan internet.
2.2.2 Misi
1. Memberikan kualitas layanan terbaik yang didukung dengan berbagai solusi dan inovasi jaringan telekomunikasi teraktual dalam meningkatkan pelayanan bagi pelanggan.
2. Membangun dan mengembangkan infrastruktur jaringan diseluruh kota di Indonesia dengan teknologi terbaru
4 3. Selalu mengembangkan sumber daya manusia secara konsisten untuk mencapai
kesuksesan
2.3 Struktur Organisasi Perusahaan
Pimpinan dari PT Agsa Global Network bernama Muhammad Akip, A.Md.
sedangkan pembimbing lapangan KP bernama Suhardi, A.md yang merupakan sales yang menjadi Pembimbing KP selama 3 bulan di PT. Agsa Global Network. Berikut adalah struktur organisasi PT Agsa Global Network.
Gambar 2.2 Struktur PT Agsa Global Network (Sumber: PT Agsa Global Network)
Gambar di atas merupakan struktur dari PT Agsa Global Network yang dimana setiap bagian memiliki tugas dan tanggung jawab masing-masing. Seperti pada jabatan pemimpin perusahaan yang merupakan jabatan tertinggi di perusahaan PT Agsa Global Network.
2.4 Ruang Lingkup Perusahaan
AGN Provider merupakan sebuah perusahaan penyedia jasa internet terpercaya yang berkembang di Indonesia berbekalan teknologi terbaru. Berlandaskan tujuan untuk memberikan layanan yang berkualitas kepada pelanggan serta mengutamakan kepuasan pelanggan, AGN Provider berkomitmen untuk selalu fokus melayani dan memberikan solusi berkualitas terbaik yang sesuai dengan kebutuhan pelanggan akan layanan jasa telekomunikasi data.
AGN Provider memberikan layanan berupa ISP (Internet Service Provider) satu-satunya di Bengkalis. Paket internet di sesuaikan untuk UMKM (Usaha Kecil &
Menengah) sangat cocok untuk usaha baru ataupun yang sudah berjalan dengan biaya
5 yang terjangkau. Selanjutnya layanan VPN (Virtual Private Network) membantu perusahaan membangun jaringan komunikasi yang aman dan hemat biaya. Meski dengan kantor cabang yang berada dilokasi terpencil sekalipun. Selanjutnya layanan software house, bergerak di bidang pengembangan perangkat lunak dan konsultan IT yang berlokasi di Bengkalis Riau. AGN Provider memberikan solusi IT satu atap untuk membantu melakukan transformasi digital dan mengembangkan usaha pelanggan. Terakhir layanan jasa pemasangan CCTV, dengan akses internasional dan local akses yang cepat, murah dan hemat bandwidth serta dengan sharing acceses concept up to 1,2 s/d 10 Mbps membuat pelanggan nyaman berinternet.
6
3 BAB III
DESKRIPSI KEGIATAN SELAMA KERJA PRAKTIK
3.1 Uraian Tugas yang Dikerjakan
Kerja Praktik (KP) dilaksanakan selama 2 bulan yang dilaksanakan dari tanggal 5 Juli 2021 sampai dengan 31 Agustus 2020 di PT. Agsa Global Network.
Selama melaksanakan KP di PT. Agsa Global Network dan ditempatkan dibagian desain adapun tugas yang diberikan, diantaranya:
3.1.1 Mendesain Banner Kuliner Website Bumdes Menggunakan Figma
Gerai Bumdes merupakan media pemasaran produk-produk olahan Bumdes Kuala Alam. Dengan media pemasaran digital ini, diharapkan dapat memasarkan produk Bumdes lebih luas. Berikut ini penulis rancang desain aplikasi mobile Gerai Bumdes menggunakan aplikasi Figma.
Gambar 3.1 Mendesain Banner Kuliner menggunakan Figma (Sumber: Dokumentasi, 2021)
7 3.1.2 Mendesain Banner Kec. Rupat Utara, Siak Kecil, Kec. Bukit Batu, dan
Bandar Laksamana
Gambar 3.2 Desain Banner Website Desa (Sumber: Dokumentasi, 2021)
3.1.3 Membuat Website PhoneApp Landing Page
PhoneApp adalah contoh website yang penulis kerjakan saat magang.
Merupakan website penyedia jasa layanan paket internet berbasis web. Tampilan website berupa bentuk landing page, dan dibuat responsive supaya memudahkan user dalam membuka website tersebut.
Gambar 3.3 Membuat Website PhoneApp (Sumber: Dokumentasi, 2021)
8 3.1.3.1 Source Code Aplikasi
Berikut ini source code website BestApp yang menggunakan kode editor Visual Studio Code dan browser Chrome untuk menjalankan website.
Gambar 3.4 PhoneApp index.html (Sumber: Dokumentasi, 2021)
Gambar 3.5 PhoneApp style.css (Sumber: Dokumentasi, 2021)
9
Gambar 3.6 PhoneApp responsive.css (Sumber: Dokumentasi, 2021)
10 3.1.3.2 Hasil Website PhoneApp
Gambar 3.7 Hasil Website PhoneApp (Sumber: Dokumentasi, 2021)
11 3.2 Alat dan Peralatan yang Digunakan
3.2.1 Laptop
Gambar 3.8 Laptop (Sumber: Dokumentasi, 2021)
Laptop atau komputer jinjing adalah komputer pribadi yang berukuran relatif kecil dan ringan. Beratnya berkisar dari 1-6 kg, tergantung pada ukuran, bahan, dan spesifikasi laptop tersebut. Sumber daya laptop berasal dari baterai atau adaptor A/C yang dapat digunakan untuk mengisi ulang baterai dan menyalakan laptop itu sendiri, didalam kerja praktik itu sendiri laptop sangat penting untuk mengerjakan kegiatan kegiatan yang sudah di berikan oleh pemimpin lapangan.
3.2.2 Aplikasi Browser
Gambar 3.8 Figma (Sumber: Dokumentasi, 2021)
Figma adalah aplikasi browser editor vektor dan alat pembuatan prototype yang berbasis web berfungsi untuk mendesain mockup atau landing page sesuai keinginan tersendiri.
12 3.3 Kendala yang Dihadapi Selama Kerja Praktik
Setiap kegiatan selalu memiliki kendala atau permasalahan dari berbagai aspek. Begitu pula dengan kerja praktik yang dilaksanakan selama 2 bulan di PT Agsa Global Network. Berikut permasalahan yang dihadapi selama kerja praktik:
1. Kendala yang saya hadapi sendiri ialah saat mengerjakan atau sedang mendesain banner atau landing page menggunakan figma, laptop menjadi sedikit berat sehingga menghambat pekerjaan.
13
4 BAB IV
PERANCANGAN USER INTERFACE UNTUK LANDING PAGE PINEACHIPS
4.1 Uraian Judul 4.1.1 PineaChips
PineaChips merupakan produk garapan Gerai Bumdes yang termasuk kedalam kategori UMKM Desa Kuala Alam. PineaChips salah satu produk unggulan dari UMKM desa Kuala Alam. PineaChips adalah makanan ringan yang diolah dari nanas yang berkualitas higienis, dan dibungkus dalam satu kemasan yang sudah disediakan dan siap untuk di pasarkan selain itu pula produk PineaChips salah satu produk yang sangat laku di pemasaran Website Gerai Bumdes. Pada gambar 4.1.1 Merupakan produk PineaChips dari UMKM desa Kuala Alam.
Gambar 4.1 Produk Pineachips (Sumber: Dokumentasi, 2021)
4.1.2 Landing Page
Dalam pemasaran online, halaman arahan kadang-kadang dikenal sebagai
“halaman pengambilan prospek”, “halaman properti tunggal”, “halaman statis”,
“halaman pemerasan” atau “halaman tujuan”.
14 4.2 Perancangan Desain Mockup
Dalam tahapan ini, penulis menggunakan figma untuk merancang desain mockup tersebut, berikut adalah gambar tampilan desain mockup tersebut:
4.2.1 Tampilan Halaman Beranda
Merupakan tampilan UI halaman Beranda yang pertama kali muncul saat landing page dibuka. Gambar ini diambil beserta dengan aplikasi browser tempat membuat desain web sederhana landing page PineaChips
Gambar 4.2 Mockup Halaman Beranda (Sumber: Dokumentasi, 2021)
4.2.2 Tampilan Halaman Produk
Merupakan tampilan Halaman Produk yang akan menampilkan kategori produk PineaChips itu sendiri. Serta komposisi dalam pembuatan PineaChips tersebut.
15
Gambar 4.3 Mockup Halaman Produk (Sumber: Dokumentasi, 2021)
4.2.3 Tampilan Halaman Footer
Merupakan tampilan Halaman Footer yang akan menampilkan kategori Tentang produk, contact yang bisa dihubungi serta login untuk Email pelanggan yang sudah tercantum di halaman Footer pineachip.
Gambar 4.4 Mockup Halaman Footer (Sumber: Dokumentasi, 2021)
16 4.3 Pengaplikasian Desain Menjadi Tampilan UI
Dalam tahap ini, penulis mengaplikasikan rancangan desain mockup yang telah dibuat mengguanakan figma menjadi tampilan UI Text Editor Visual Studio Code.
4.3.1 Tampilan Halaman Beranda
Gambar dibawah ini merupakan tampilan halaman beranda yang pertama kali muncul saat dibuka di website sederhana produk pineachip
Gambar 4.5 Tampilan Halaman Beranda (Sumber: Dokumentasi, 2021)
4.3.2 Tampilan Halaman Produk
Gambar ini adalah tampilan halaman produk 1 dan 2 yang dimana dihalaman produk 1 menjelaskan apa itu pineachip dan di halaman tampilan produk dua menjelaskan bagaimana proses dari pembuatan produk pineachip itu sendiri
17
Gambar 4.6 Tampilan Halaman Produk 1 (Sumber: Dokumentasi, 2021)
Gambar 4.7 Tampilan Halaman Produk 2 (Sumber: Dokumentasi, 2021)
18 4.3.3 Tampilan Halaman Footer
Dihalam footer pula ialah halaman yang akan mengarahkan dimana kita bisa membeli produk pineachip yang sudah di olah menjadi satu kemasan yang higienis.
Gambar 4.8 Tampilan Halaman Footer (Sumber: Dokumentasi, 2021)
19
5 BAB V PENUTUP
5.1 Kesimpulan
Menurut penulis, kesimpulan yang dapat diambil ialah dengan tugas yang telah diberikan kepada penulis, membuat pengetahuan dan keahlian penulis dalam bidang pemograman dan desain semakin meningkat, dengan diberikannya ruang yang bebas untuk bertanya membuat penulis tidak terlalu kesulitan dalam memahami hal-hal baru sehingga membuat penulis bisa mengerjakan tugas dengan nyaman. Penulis dapat merasakan suka dan dukanya dalam bidang pekerjaan programming, yang membuat penulis akan semakin disiplin dan terus semangat mendalami bidang programming sehingga bisa mencapai apa yang telah penulis cita-citakan serta bisa berguna bagi orang lain menggunakan ilmu yang telah penulis dapatkan disaat Kerja Praktik.
5.2 Saran
1. Diharapkan Politeknik Negeri Bengkalis dapat terus menjalin hubungan yang baik Perusahaan-perusahaan yang terkait dengan pelaksanana Kerja Praktik terutama PT Agsa Global Network.
2. Sebaiknya Politeknik Negeri Bengkalis lebih memberikan penegasan kepada dosen pembimbing agar lebih peduli terhadap mahasiswa yang dibimbing.
3. Sebaiknya dosen pembimbing Kerja Praktik lebih bersikap professional sebagai dosen pembimbing dengan lebih mementingkan tugas dibandingkan ego ataupun gengsi.
20
DAFTAR PUSTAKA
Politeknik Negeri Bengkalis, 2017, Buku Panduan Kerja Praktek (KP) Mahasiswa Politeknik Negeri Bengkalis, Riau.
Ekasmara, A., & Santoso, N. (2020). Pengembangan Web Portal Landing Page E- Commerce Dengan Pola Single Page Application. Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, Vol. 4, No. 8, , 2713-2721.
Maulana, R. (2020). Perancangan User Interface User Experience Dengan Metode User Centered Design Pada Aplikasi Mobile Auctentik. skripsi.
Yogyakarta: Universitas Islam Indonesia.
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
