Jurnal informasi dan Komputer Vol: 12 No:1 2024
P-ISSN: 2337-8344
E-ISSN: 2623-1247
Rancang Pembaruan Front-end Company Profile berbasis Website untuk PT.
Gerbang Sinergi Prima Fahira Nurazizah1.
Rita Komalasari2 Politeknik LP3I12 Jl.
Pahlawan No.
Bandung.
Indonesia12 E-mail : fahiranurazizah.
r21mi@plb.
id1, ritakomalasari@plb.
ABSTRAK
PT.
Gerbang Sinergi Prima adalah bagian dari perusahaan Dana Pensiun PT.
PLN (Perser.
yang mana perusahaan ini berfokus pada sektor Teknologi Informasi dan Komunikasi (TIK).
Setiap perusahaan pada saat ini pasti memiliki sebuah website company profile yang bukan hanya dijadikan sebagai investasi, tetapi juga kebutuhan penting di era digital ini.
Oleh karena itu dibangunlah website company profile yang diharapkan sebagai tempat informasi, sarana branding, dan juga pemasaran secara online.
Namun demikian desain website tersebut telah cukup lama digunakan, sehingga diperlukan perancangan kembali atau pembaruan website company profile dari segi tampilan juga fitur guna memberikan tampilan juga kesan baru bagi pengunjung website dengan tujuan meningkatkan aspek estetika, dan menjaga serta meningkatkan fungsionalitas website agar website dapat mudah dipahami oleh pengguna.
Extreme Programming (XP) termasuk ke dalam kelompok metode agile yang cukup populer, juga sering di terapkan terutama pada pengembangan perangkat lunak berskala kecil.
Pada bagian hasil dan pembahasan ini dirancang untuk menyajikan hasil dari penelitian yang telah dilakukan.
Seksi ini dibuat dengan mengacu pada metode Extreme Programming (XP) yang mana di dalam prosesnya meliputi kegiatan planning .
, design .
, coding .
, dan testing .
Dari hasil penelitian ini dapat ditarik kesimpulan bahwa AuRancang Pembaruan Front-End Company Profile Berbasis WebsiteAy ini telah berhasil dibangun sehingga dapat membantu pekerjaan perusahaan yaitu PT.
Gerbang Sinergi Prima untuk pembaruan website company profile dari segi tampilannya.
Penelitian ini memanfaatkan metode Extreme Programming, pemilihan metode ini disebabkan oleh kemampuannya yang dapat mempercepat dan meningkatkan efesiensi proses pembangunan sistem.
Kata kunci : Website.
Company Profile.
Extreme Programming.
Front-End
ABSTRACTS
PT.
Gerbang Sinergi Prima is a part of the Pension Fund company PT.
PLN (Perser.
, which focuses on the Information and Communication Technology (ICT) sector.
Every company nowadays must have a company profile website, which serves not only as an investment but also a crucial necessity in this digital era.
Therefore, a company profile website was built to serve as an information hub, branding platform, and online marketing tool.
However, the current website design has been in use for quite some time, necessitating a redesign or update to provide visitors with a fresh look and new features aimed at enhancing aesthetics and improving website functionality, making it user-friendly.
Extreme Programming (XP) falls under the category of popular agile methodologies, often applied in small-scale software development projects.
This section on results and discussion is designed to present the outcomes of the research conducted.
It is crafted in accordance with the Extreme Programming (XP) methodology, which includes planning, design, coding, and testing activities.
From the results of this research, it can be concluded that the "Redesign of Front-End Company Profile Website" has been successfully developed to assist the work of PT.
Gerbang Sinergi Prima in updating the company profile website in terms of its appearance.
This research utilized the Extreme Programming methodology, chosen for its ability to accelerate and improve the efficiency of the system development process.
Keywords: Website.
Company Profile.
Extreme Programming .
Front-End.
PENDAHULUAN
Sistem informasi kini semakin melaju pesat sehingga mempengaruhi aktivitas serta kehidupan sehari-hari.
Hampir semua aspek kegiatan baik dalam bidang pendidikan, ekonomi, juga pemerintahan sangat bergantung pada sistem informasi yang berjalan saat ini.
PT.
Gerbang Sinergi Prima adalah bagian dari 103 | S T M I K D i a n C i p t a C e n d i k i a K o t a b u m i Jurnal informasi dan Komputer Vol: 12 No:1 2024 perusahaan Dana Pensiun PT.
PLN (Perser.
yang mana perusahaan ini berfokus pada sektor Teknologi Informasi dan Komunikasi (TIK).
Setiap perusahaan pada saat ini pasti memiliki sebuah website company profile yang bukan hanya dijadikan sebagai investasi, tetapi juga kebutuhan penting di era digital ini.
Oleh karena itu dibangunlah website company profile yang diharapkan sebagai tempat informasi, sarana branding, dan juga pemasaran secara online.
Namun demikian desain website tersebut telah cukup lama digunakan, sehingga diperlukan perancangan kembali atau pembaruan website company profile dari segi tampilan juga fitur guna memberikan tampilan juga kesan baru bagi pengunjung website dengan tujuan meningkatkan aspek estetika, dan menjaga serta meningkatkan fungsionalitas website agar website dapat mudah dipahami oleh pengguna.
Sedangkan website merupakan salah satu bentuk pengaplikasian dari Teknologi Informasi dan Komunikasi (TIK).
Pengertian dari website itu sendiri adalah gabungan halaman web yang saling terhubung dan dapat di akses melalui alamat website atau domain, yang mana isi kontennya ialah informasi berupa teks, gambar, juga video, sebagai sarana informasi, komunikasi, juga pemasaran secara online dan pembuatan website juga ditujukan untuk kepentiangan individu, organisasi, lembaga, atapun perusahaan.
Kemudian pengertian dari Teknologi Komunikasi dan Informasi atau singkatan dari TIK merujuk pada rangakaian proses teknologi yang berfokus pada pengolahan, produksi, dan penyebaran informasi, seperti pertukaran informasi melalui media.
Website company profile adalah deskripsi umum mengenai perusahaan, yang memuat informasi mengenai sejarah, visi, misi, produk, layanan struktur organisasi, kebijakan perusahaan dan informasi lainnya yang berkaitan dengan perusahaan.
Tujuan dari pembuatan website company profile ini sebagai sarana pembentukan citra perusahaan atau branding yang positif sehingga dapat menumbuhkan kepercayaan pihak eksternal seperti klien mengenai nilai serta kinerja perusahaan.
Website company profile juga dapat dijadikan sebagai sarana pemasaran sebuah perusahaan yang dapat diakses dengan mudah kapanpun dan dimanapun melalui jaringan internet, sehingga dengan prosesnya yang praktis pengunjung mendapatkan informasi dengan cepat mengenai perusaan tersebut dan hal ini dapat meningkatkan citra atau reputasi perusahaan tersebut di ranah digital.
Front-end adalah bagian dari sebuah situs web yang dapat langsung dilihat oleh pengguna, yang mana mencakup pembuatan layout, desain, dan lain sebagainya yang berhubungan dengan visual website.
Selain berfokus pada visual ataupun P-ISSN: 2337-8344
E-ISSN: 2623-1247
estetika desain website tetapi juga front-end ini harus memperhatikan desain yang responsif bagi website sehingga dapat memberikan kesan dan pengalaman yang memuaskan bagi pengguna ketika membuka website tersebut di berbagai ukuran atau layar gadget yang digunakan.
Metode Penelitian 1 Metode Extreme Programming (XP) Dalam konteks pengembangan perangkat lunak, penelitian ini memanfaatkan pendekatan Extreme Programming (XP) sebagai metode utama untuk di terapkan pada rancang pembaruan front-end website company profile.
Metode Extreme Programming (XP) merupakan suatu metode yang digunakan untuk pengembangan perangkat lunak yang mengadopsi pendekatan berorientasi pada objek dan berfokus pada pencapaian tujuan dengan kualitas perangkat lunak dan responsif terhadap perubahan kebutuhan pengguna secara cepat dan efesien.
Tahapan Penelitian Extreme Programming dapat dilihat pada Gambar 1.
Gambar 1.
Metode Extreme Programming (XP) 2 Metode Extreme Programming (XP) Extreme Programming (XP) termasuk ke dalam kelompok metode agile yang cukup populer, juga sering di terapkan terutama pada pengembangan perangkat lunak berskala kecil.
Berikut dibawah ini merupakan penjelasan dari tahapantahapan programming (XP):
Planning (Perencanaa.
Pada tahapan planning atau perencanaan ini tim atau individu berfokus pada menemukan solusi dari masalah yang ada untuk memenuhi kebutuhan yang diinginkan.
Yang mana hal tersebut terjadi melalui proses pengumpulan kebutuhan pengguna, memahami bagaimana alur bisnis itu berjalan sehingga memperoleh gambaran yang jelas mengenai fungsionalitas, fitur-fitur yang akan di gunakan, dan output yang diharapkan.
104 | S T M I K D i a n C i p t a C e n d i k i a K o t a b u m i Jurnal informasi dan Komputer Vol: 12 No:1 2024 .
Design (Perancanga.
Tahapan design atau perancangan adalah fase ketika user stories yang telah ditetapkan pada diimplementasikan guna membuat rancangan alur kerja suatu aplikasi atau sistem yang akan di buat.
P-ISSN: 2337-8344
E-ISSN: 2623-1247
1 Planning (Perencanaa.
Tahapan coding atau pengkodean ini ialah tahap pengimplementasian penulisan kode dari desain yang telah dibuat sebelumnya menjadi sebuah aplikasi atau sistem website yang utuh.
Pada tahap perencanaan dilakukan dengan pengumpulan informasi mengenai kebutuhan yang diperlukan dalam pembuatan sistem bersama klien yang bersangkutan agar rancang pembaruan sistem ini sesuai dengan alur bisnis yang di inginkan.
Sebelum menetapkan fungsionalitas dari perangkat lunak tersebut, diperlukan identifikasi masalah terlebih dahulu sebagai acuan dibuatnya perangkat lunak ini.
Permasalahan utama yang di alami ialah mengenai tampilan website yang ingin di perbaharui sehingga mengenai fungsionalitas website tidak berubah.
Testing (Pengujia.
2 Design (Perancanga.
Coding (Pengkodea.
Pada tahap testing atau pengujian dilakukan pada sebuah sistem aplikasi atau website yang telah dibuat untuk menguji fungsionalitas serta fitur yang terdapat pada sistem tersebut secara keseluruhan.
Serta mengenai metode yang digunakan dalam penelitian ini adalah Black-box Testing masukkan maupun keluaran yang dihasilkan oleh sistem tersebut.
Pada tahapan ini ditujukan untuk pembuatan spesifikasi terkait arsitektur program, antarmuka, dan elemen pendukung lainnya.
Penjelasan dari tahap perancangan ini terdapat pada use case, dan user flow diagram yang dibuat berdasarkan pengumpulan informasi yang dilakukan bersama klien yang terdapat pada Gambar 2 dan 3.
HASIL DAN PEMBAHASAN
Pada bagian hasil dan pembahasan ini dirancang untuk menyajikan hasil dari penelitian yang telah Seksi ini dibuat dengan mengacu pada metode Extreme Programming (XP) yang mana di dalam prosesnya meliputi kegiatan planning .
, design .
, coding .
, dan testing .
Gambar 2.
Use Case Diagram Gambar 3.
User Flow Diagram 105 | S T M I K D i a n C i p t a C e n d i k i a K o t a b u m i Jurnal informasi dan Komputer Vol: 12 No:1 2024 Berdasarkan hasil dari perancangan desain yang terdapat pada Gambar 2 dan 3, hanya terdapat satu pengguna yaitu pengunjung website yang dapat mengakses seluruh menu atau fitur yang terdapat pada website company profile tersebut.
P-ISSN: 2337-8344
E-ISSN: 2623-1247
ketika pengguna mengakses website company profile berikut maka akan langsung di tujukan kepada halaman home pada yang tertera pada Gambar 5.
Dari hasil rancangan use case diagram, dan user flow diagram yang tertera pada Gambar 2 dan 3 serta hasil diskusi bersama klien, maka dibuatlah mockup beserta prototipe untuk website company profile menggunakan figma yang mana tertera pada Gambar 4.
Gambar 5.
Halaman Home Gambar 4.
Rancangan Mockup dan Prototipe Figma ialah sebuah platform untuk membuat desain yang kolaboratif untuk membuat rancangan antarmuka pengguna (UI) dan pengalaman pengguna (UX) untuk aplikasi mobile, dekstop, dan situs web, yang mana dapat di akses di berbagai sistem operasi seperti windows, mac, juga linux selama terhubung Dan sekelompok orang untuk bekerja secara tim dengan lokasi yang berbeda sehingga pekerjaan bisa lebih cepat dan anggota tim juga dapat bekerja secara interaktif menggunakan fiturfitur yang disediakan seperti fitur komentar dan lainnya.
Mockup merupakan perwujudan visual dari sebuah desain produk yang memberikan bagaimana konsep desain dari produk tersebut berjalan dan terlihat seperti nyata, yang mana disini produknya berupa sebuah website company profile.
Sedangkan Prototipe adalah penerapan desain yang interaktif, dimana pengguna dapat melakukan uji coba secara langsung dan menciptakan pengalaman pengguna.
Prototipe juga memungkinkan desainer untuk membuat simulasi antarmuka pengguna, seperti mengklik tombol, navigasi halaman, dan memberikan efek berupa animasi.
3 Coding (Pengkodea.
Setelah dilakukan perancangan sistem dan pembuatan mockup serta prototipe nya maka tahapan selanjutnya adalah pengimplementasian ke dalam kode pemprogramman, yang mana dalam prosesnya menggunakan framework bootstrap.
HTML.
CSS, dan JavaScript.
Sesuai dengan fungsional yang telah ditetapkan sebelumnya.
Setelah berada di halaman home maka pengguna dapat mengakses seluruh halaman dan informasi lainnya seperti halaman tentang perusahaan.
GesPay.
Layanan.
Kebijakan Perusahaan.
Mitra.
Aktivitas, dan karir.
Gambar 6 merupakan beberapa tampilan hasil dari proses coding:
Gambar 6.
Beberapa Halaman Website 4 Testing (Pengujia.
Black-box Testing merupakan salah satu metode pengujian untuk sebuah sistem perangkat lunak dimana dalam prosesnya dilakukan dengan berfokus pada fungsionalitas input dan output yang dihasilkan sistem, tanpa menelaah struktur kode ataupun logika yang digunakan.
Jenis pengujian ini ditujukan untuk memastikan sistem berjalan sesuai dengan spesifikasi yang telah ditentukan.
Berikut hasil pengujian dari website front-end company profile yang mana sistemnya telah berjalan sesuai harapanan dari klien dan dapat dijalankan dengan baik, dan dapat dilihat pada Tabel 1.
Tabel 1.
Hasil Pengujian Black-box Testing Aktivitas Pengujian Hasil
Keterangan Menu
Home
Sesuai Merupakan menu yang pertama kali di lihat ketika Menu
Tentang Sesuai Dapat di akses ketika mengklik menu Tentang 106 | S T M I K D i a n C i p t a C e n d i k i a K o t a b u m i Jurnal informasi dan Komputer Vol: 12 No:1 2024
Aktivitas Pengujian Menu
GesPay
Hasil
Keterangan Sesuai Dapat di akses ketika mengklik menu GesPay
Menu
Layanan Sesuai Ketika mengklik menu Layanan maka akan muncul beberapa Layanan Submenu
Electronic Payment
Solutions Sesuai Muncul ketika sudah mengklik menu Layanan, dan dapat di akses ketika Electronic Payment
Solutions Submenu
Software Developme Submenu
Data
Center
Sesuai Sesuai Submenu
Fiber Optic
Solutions Sesuai Submenu
Jasa
Konstruksi
Sesuai P-ISSN: 2337-8344
E-ISSN: 2623-1247
Aktivitas Pengujian Muncul ketika sudah mengklik menu Layanan, dan dapat di akses ketika submenu Fiber
Optic Solutions Muncul ketika sudah mengklik menu Layanan, dan dapat di akses ketika submenu Fiber
Keterangan Optic Solutions Muncul ketika sudah mengklik menu Layanan, dan dapat di akses ketika Software Development Muncul ketika sudah mengklik menu Layanan, dan dapat di akses ketika submenu Data
Center
Hasil
Submenu
Produk
Sesuai Muncul ketika sudah mengklik menu Layanan, dan dapat di akses ketika submenu Produk
Submenu
Proyek
Sesuai Muncul ketika sudah mengklik menu Layanan, dan dapat di akses ketika submenu Proyek
Menu
Kebijakan Privasi
Sesuai Dapat di akses ketika mengklik menu Kebijakan Privasi
Menu
Mitra
Sesuai Dapat di akses ketika mengklik menu Mitra
Menu
Kontak
Sesuai Dapat di akses ketika mengklik menu Kontak
Menu
Aktivitas Sesuai Dapat di akses ketika mengklik menu Aktivitas Menu
Karir
Sesuai Dapat di akses ketika mengklik menu Karir
KESIMPULAN DAN SARAN
1 Kesimpulan Dari hasil penelitian ini dapat ditarik kesimpulan bahwa AuRancang Pembaruan Front-End Company Profile Berbasis WebsiteAy ini telah berhasil dibangun sehingga dapat membantu pekerjaan perusahaan yaitu PT.
Gerbang Sinergi Prima untuk pembaruan website company profile dari segi Penelitian ini memanfaatkan metode Extreme Programming, pemilihan metode ini disebabkan oleh kemampuannya yang dapat mempercepat dan meningkatkan efesiensi proses pembangunan sistem.
Perancangan sistem menggunakan use case
diagram dan user flow diagram, taklupa
107 | S T M I K D i a n C i p t a C e n d i k i a K o t a b u m i Jurnal informasi dan Komputer Vol: 12 No:1 2024
P-ISSN: 2337-8344
E-ISSN: 2623-1247
membuat desain mockup beserta prototipe nya untuk mempermudah proses penerjemahan hasil perancangan ke dalam kode pemrogramman.
Pada proses coding sendiri peniliti menggunakan framework bootstrap.
HTML.
CSS, dan JavaScript, untuk merancangan website sesuai dengan spesifikasi yang diharapkan klien.
Yang mana setelahnya dilakukan pengujian dengan metode Black-box Testing guna memastikan fitur yang terdapat pada sistem masih terdapat kekurangan atau sudah sesuai.
Dan setelahnya rangangan pembaruan ini akan diserahkan kepada pihak perusahaan.
AuPelatihan Pemanfaatan CMS Untuk Pembuatan Website Bagi OrangTua Siswa Sekolah Alam Tangerang,Ay J.
Pengabdi.
Masy.
TEKNO, vol.
2, no.
1, pp.
20Ae25, .
Mukhsin.
AuPeranan teknologi informasi dan komunikasi menerapkan sistem informasi desa dalam publikasi informasi desa di era globalisasi,Ay Teknokom, vol.
1, pp.
7Ae15, 2020.
Astuti.
Pabulo, and P.
Setyaningsih.
AuPembuatan Company Profile untuk Gula Kelapa Kulon Progo Berbasis Website,Ay Dedik.
Pengabdi.
Pendidik.
dan Teknol.
Masy.
, vol.
1, no.
37Ae41, 2023.
Orisa.
Faisol, and M.
Ashari.
AuPERANCANGAN
WEBSITE
COMPANY
PROFILE
MENGGUNAKAN DESIGN SCIENCE
RESEARCH
METHODOLOGY
(DSRM),Ay J.
Inform.
Teknol.
dan Sains, 5, pp.
160Ae164.
Feb.
2023, doi:
51401/jinteks.
Pranoto.
Mundzilin, and A.
Pradina.
AuPembuatan Company Profile Madrasah Tsanawiyah Nahdlatul Ulama Kepuharjo Karangploso,Ay Pros.
SENIATI,
7, no.
1, pp.
81Ae90, 2023.
Chastro Darmawan.
AuPerbandingan Pengembangan Front End Menggunakan Blade Template dan Vue Js,Ay J.
Strateg.
Maranatha, vol.
2, no.
302Ae313, 2020.
Rancangan pembaruan ini selanjutnya akan Diharapkan, melalui hasil dari penelitian ini dapat di gunakan dengan sebaik-baiknya untuk menjadi sumber informasi bagi penggunjung website mengenai perusahaan.
2 Saran Diharapkan, melalui hasil dari penelitian ini dapat di gunakan dengan sebaik-baiknya untuk menjadi sumber informasi bagi penggunjung website mengenai perusahaan.
Serta kepada mengembangkan penelitian ini agar menjadi lebih sempurna dengan menambahkan data, logika aplikasi, serta interaksi antara tampilan website denagan database, serta komponen lainnya yang dapat menghasilkan website yang lebih interaktif, menarik dan mudah digunakan.
Besar harapan peneliti agar website ini dapat dimanfaatkan untuk memberi kesan dan pengalaman baru bagi pengunjung website.
DAFTAR PUSTAKA