Vol. 12 No. 2, pISSN: 2303-0577 eISSN: 2830-7062                http://dx.doi.org/10.23960/jitet.v12i2.4197

## PERANCANGAN DAN IMPLEMENTASI COMPANY PROFILE BERBASIS WEBSITE DI HONGDE COLLEGE
Yefta Christian 1* , Hansvirgo 2
1,2 Universitas Internasional Batam; Jl. Gajah Mada, Tiban Indah, Kec. Sekupang, Kota Batam; (0778) 7437111
Riwayat artikel:
Received: 14 Maret 2024 Accepted: 30 Maret 2024 Published: 2 April  2024
Keywords: website company profile ; waterfall ; content management system ;
Corespondent Email: yefta@uib.ac.id
Abstrak. Hongde  College  adalah  sebuah  lembaga  pendidikan  bahasa Mandarin  yang  berlokasi  di  Batam,  Kepulauan  Riau.  Hongde  College menawarkan berbagai program dan servis berkualitas yang bisa meningkatkan kemampuan  dan  pengetahuan  atas  budaya  dan  bahasa  Mandarin.  Namun, kurangnya informasi lembaga yang tersebar pada masyarakat, khususnya para pelajar menjadi salah satu hambatan bagi Hongde College untuk menjangkau target pasar yang lebih luas. Agar dapat menjangkau masyarakat yang lebih luas, website company  profile dapat  digunakan.  Tujuan  dari  pembuatan website company profile adalah sebagai website identitas Hongde College dan juga  sumber  informasi  bagi  masyarakat.  Pengembangan website pada penelitian  ini  menggunakan  metode  SDLC Waterfall .  Hasil  dari  penelitian adalah website company profile dan content management system yang dapat digunakan  untuk  mengolah  konten website . Website yang  dihasilkan  sesuai dan  memenuhi  kebutuhan  Hongde  College. Website diimplementasikan dengan hosting secara online.
Abstract. Hongde  College  is  a  language  education  institution  located  in Batam,  Riau  Islands,  Indonesia.  The  college  offers  various  programs  and services to enhance the understanding and skills in Mandarin language and Chinese  culture.  However,  the  lack  of  information  about  the  college  is  a barrier  for it to  reach a wider target  market.  To overcome this, a  company profile website can be developed. The purpose of creating a company profile website is to serve as an identity for Hongde College and also as a source of information for the public. The website development was carried out using the Waterfall  SDLC  method.  The  result  of  the  research  is  a  company  profile website and a content management system that can be used to manage website content.  The  website  meets  the  needs  of  Hongde  College  and  has  been implemented with online hosting.

## 1. PENDAHULUAN
Perkembangan  teknologi  yang  pesat  dan hadirnya internet telah mempermudah masyarakat  dalam  mencari  informasi  melalui media  digital  [1].  Perkembangan  ini  juga membawa berbagai perubahan di bidang bisnis dan ekonomi. Salah satu hal yang dapat dilihat adalah banyaknya pemasaran digital saat ini [2],
[3]. Berbagai perusahaan yang masih menggunakan  media  cetak  telah  beralih  ke media digital sebagai media promosi.
Salah  satu  media  digital  yang  sering digunakan  dan  dijumpai  pada  saat  ini  adalah website . Website adalah  kumpulan  halaman web  yang  saling  terhubung  dan  dapat  diakses melalui internet [4]. Website adalah sarana yang efektif untuk mempromosikan produk, layanan, atau  informasi  dengan  menjangkau  audiens yang lebih luas [5], [6]. Hal ini juga didukung dengan  data  peningkatan  pengguna website yang terjadi secara terus-menerus, salah satunya yaitu  peningkatan  di  Indonesia  yang  sebesar
61,6%  sepanjang  tahun  2020  [7].  Selain  itu, website juga  merupakan  penyedia  informasi yang lengkap dan efektif dimana website dapat menyediakan  berbagai  informasi  baik  dalam bentuk teks, gambar, ataupun video yang dapat diakses dan dilihat oleh pengguna.
Hongde  College  merupakah  salah  satu Lembaga  Pendidikan  Bahasa  Mandarin  yang berlokasi di Batam, Kepulauan Riau, Indonesia. Hongde College adalah lembaga penyelenggara kursus,  pelatihan  dan  tes  kompetensi  bahasa Mandarin berstandar internasional HSK. Sejak tahun  2020,  Hongde  College  menyediakan pelatihan pembelajaran mandarin secara offline ataupun online, untuk mempermudah pelatihan berlangsung  selama  pandemi  beredar.  Hongde College  berpengalaman  dalam  pelaksanaan bimbingan ujian HSK, Summer / Winter Camp, beasiswa ke RRC, serta aktif menyelenggarakan  beragam  aktivitas  antara lain camp budaya, kompetisi bahasa Mandarin, sertifikasi guru Bahasa Mandarin, dan lain-lain. Selain  menyelenggarakan  berbagai  kegiatan yang  menunjang  pengembangan  budaya  dan bahasa  Mandarin,  Hongde  College  juga menjadi  pusat  penyediaan  materi  (buku pelajaran) berbasis HSK di wilayah Kepulauan Riau dan sekitarnya
Pada  saat  ini,  Hongde  College menghadapi sejumlah tantangan dalam membangun eksistensi dan visibilitasnya di tengah persaingan  dengan  lembaga  sejenis.  Lembaga ini menghadapi tantangan dalam memperkenalkan  dirinya  kepada  masyarakat luas, terutama bagi mereka yang tertarik untuk mempelajari  budaya  dan  bahasa  mandarin. Keterbatasan akses informasi mengenai lembaga  pendidikan  ini  menjadi  salah  satu masalah yang dihadapi.
Untuk  membantu  Hongde  College  dalam meningkatkan  visibilitas,  dibutuhkan  sebuah media digital yang dapat dengan mudah diakses dan disebarkan ke masyarakat luas. Dalam hal ini website dapat  digunakan. Website yang memberikan  informasi  yang  komprehensif mengenai suatu perusahaan disebut juga dengan website company  profile [7],  [8]. Website company  profile memudahkan  masyarakat mengakses  informasi  tentang  produk  atau  jasa yang  ditawarkan  oleh  suatu  perusahaan  [9], [10]. Selain itu, penggunaan website juga dapat menghasilkan  visual  yang  lebih  menarik  dan juga professional [7].
Berdasarkan  latar  belakang  diatas,  penulis akan  merancang website company  profile sebagai  langkah  strategis  untuk  mengatasi tantangan yang dihadapi oleh Hongde College. Penulis  akan  memberikan  solusi  dan  bantuan dalam bentuk kegiatan PKM berjudul “Perancangan  dan  Implementasi Company profile Berbasis Website di Hongde College”.

## 2. TINJAUAN PUSTAKA
1. Aplikasi Web Aplikasi Web adalah salah satu aplikasi yang berisikan informasi ataupun dokumen- dokumen  multimedia  seperti  teks,  gambar, suara,  animasi,  dan  video.  Aplikasi  ini menggunakan  protokol  HTTP  ( Hypertext Transfer  Protocol )  dan  diakses  melalui perangkat  lunak  yang  disebut  browser  [4]. Penggunaan  aplikasi  web  memudahkan setiap pengguna untuk menjangkau informasi  tanpa  dibatasi  waktu  dan  jarak selama terhubung dengan internet [11].

## 2. SDLC Waterfall
Metode Waterfall adalah  model  SDLC ( System  Development  Life  Cycle )  klasik yang  digunakan  dalam  pengembangan sistem  informasi.  Dalam  model  ini, pengembangan  aplikasi  berlangsung  secara sistematis  dan  berurutan,  sering  disebut sebagai model linear sequential [12], [13].
3. UML ( Unified Modelling Language ) Unified  Modeling  Language (UML) adalah  bahasa  pemodelan  umum  yang bertujuan untuk mendefinisikan cara standar dalam  memvisualisasikan  desain  suatu sistem.  UML  mirip  dengan blueprint yang digunakan  dalam  bidang  rekayasa  lainnya. Meskipun  bukan  bahasa  pemrograman, UML berfungsi sebagai bahasa visual yang membantu insinyur perangkat lunak, pengusaha,  dan  arsitek  sistem  dalam pemodelan,  desain,  dan  analisis.  Diagram UML  digunakan  untuk  menggambarkan perilaku dan struktur suatu sistem [14].

## 3. METODE PENELITIAN
Pengembangan  sistem  pada  penelitian  ini menggunakan SDLC waterfall.
Gambar 1. Metode Waterfall
1. Requirements Analysis
Melakukan  proses  pengumpulan  informasi dan  data  mengenai website yang  akan dibuat. Informasi diperoleh melalui berbagai cara, seperti wawancara langsung bersama  direktur  Hongde  College  dan observasi secara langsung ke lapangan.

## 2. Design
Informasi  yang  terkumpulkan  akan  diolah oleh penulis dan dibuat dalam bentuk tabel /  diagram,  dan  juga  untuk  perancangan wireframe dan UI website company profile .
3. Implementation
Pada  tahap  ini,  pembangunan website dilakukan berdasarkan kerangka yang telah disusun  sebelumnya.  Kode  pemrograman juga dibuat pada tahap ini.
4. Testing
Di  tahap  ini,  yang  akan  dilakukan  adalah pengujian dan percobaan ulang sistem yang dikembangkan.  Metode  digunakan  untuk pengujian adalah metode blackbox testing .
Metode  ini  berfokus  pada  fungsionalitas dari  aplikasi  yang  dibuat.  Keuntungan menggunakan metode ini adalah pengujian dilakukan  dari  sudut  pandang  pengguna, jadi  tester  bisa  fokus  dalam  mengetes fungsi  aplikasi  tanpa  harus  memahami bahasa coding yang digunakan [15], [16].
5. Deployment
Setelah tahap pengembangan dan pengujian,  maka  akan  dilanjutkan  tahap deployment .  Pada  tahap  ini, website
company  profile yang  telah  dibuat  akan dihosting  ke  server  sehingga  bisa  diakses oleh publik.
6. Maintenance Maintenance bertujuan untuk memperbaiki kesalahan/ bug yang  ada  dalam  aplikasi web, dan juga untuk meningkatkan kinerja website dengan  menambahkan  fungsi/fitur tertentu [17]. 4. HASIL DAN PEMBAHASAN
1. Model ERD ( Entity Relationship Diagram ) Informasi  dan  data  yang  dikumpulkan diolah  dan  dibuat  dalam  bentuk Entity Relationship  Diagram (ERD).  ERD  adalah jenis diagram yang menunjukkan bagaimana entitas-entitas berbeda (seperti orang, pelanggan,  atau  objek  lainnya)  saling berhubungan  dalam  suatu  aplikasi  atau database. Diagram ini dirancang
sebagaimana  untuk  keperluan Content management system untuk website company profile yang akan dirancang.
Gambar 2. ERD 2.
Model UCD ( Use Case Diagram ) UCD merupakan gambaran dari interaksi antara sistem dengan penggunanya.
Diagram  ini  dirancang  sebagaimana  untuk keperluan website yang akan dirancang.
Gambar 3. UCD
3. Perancangan Tampilan Website
Proses  perancangan  tampilan  diawali dengan  pembuatan  mindmap  berdasarkan data dan informasi yang telah dikumpulkan. Mind mapping adalah sebuah metode belajar dan  pemikiran  yang menggunakan  diagram
untuk mengelompokkan dan
mengorganisasi ide, informasi,  atau  konsep secara visual dan terstruktur
Gambar 4. Mindmap
Setelah  itu,  tampilan  web  dirancang berdasarkan mindmap yang telah dibuat.
Gambar 5. Perancangan Tampilan Web
Halaman  pertama  adalah landing page , yang  merupakan  halaman  pertama  yang akan  dilihat  pengguna  saat  membuka website .
Gambar 6. Halaman Utama Landing Page Selanjutnya  terdapat  halaman about  us yang berisi tentang tujuan, visi, dan misi dari Hongde College.
Gambar 7. Halaman About Us
Selanjutnya  adalah  halaman program yang berisi tentang servis dan program yang ditawarin Hongde College.
Untuk melihat detail dari program yang ditawarkan, pengguna dapat mengklik salah satu program yang ingin dilihat.
Gambar 9. Halaman Program Details
Adapun juga halaman blog & announcement yang berisi tentang pengumuman  atau  informasi  terbaru  dari Hongde College.
Gambar 10. Halaman Blog &

## Announcement
Untuk  melihat  lebih  lengkap  isi  dari masing-masing  blog  atau  announcement, pengguna  dapat  mengklik  dan  akan diarahkan ke halaman detail -nya.
Gambar 11. Halaman Blog & Announcement Detail
Selanjutnya adalah bagian CMS ( content management  system )  yang  dapat  dipakai oleh admin untuk mengolah konten website . Untuk  memasuki  CMS,  admin  harus melakukan login terlebih  dahulu.  Halaman login page dapat dilihat dibawah ini.
Gambar 12. Halaman Login
Setelah login ,  admin  akan  diarahkan  ke halaman dashboard .
Gambar 13. Halaman Dashboard
Untuk mengelola konten program , admin dapat  klik  menu program di  bagian  kiri. Setelah  itu,  tampilan  halaman  manajemen
program akan ditampilkan.
Gambar 14. Halaman Manajemen Program
Untuk  menambah program baru,  admin dapat klik tombol Create new program yang terdapat  di  bagian  kanan  atas.  Setelah  itu, akan dialihkan ke halaman form penambahan program .
Gambar 15. Halaman Add Program
Untuk  mengubah  atau  edit  suatu program , admin dapat klik tombol edit pada program yang  ingin  diubah  yang  terdapat pada  halaman  manajemen program di Gambar  14.  Setelah  itu,  admin  akan dialihkan ke halaman edit program .

## Gambar 16. Halaman Edit Program
Untuk menghapus suatu program , admin dapat klik tombol delete pada program yang ingin  dihapus  yang  terletak  disamping tombol edit yang dapat dilihat pada Gambar 14.
Selanjutnya  untuk  mengelola  konten blog  &  announcement,  admin  dapat  klik menu  blogs  di  bagian  kiri.  Setelah  itu tmapilan  halaman  manajemen  blog  akan ditampilkan.
Gambar 17. Halaman Manajemen Blog Untuk menambah blog
atau announcement baru,  admin  dapat  klik tombol Create  new  blog di  bagian  kanan atas. Setelah itu, akan dialihkan ke halaman form penambahan blog.
Gambar 18. Halaman Add Blog
Untuk  mengubah  atau  edit  suatu  blog, admin dapat klik tombol edit yang pada blog yang  ingin  diubah  yang  terdapat  pada halaman  manajemen  blog  di  Gambar  17. Setelah  itu,  admin  akan  dialihkan  ke halaman form edit blog .
Gambar 19. Halaman Edit Blog Untuk  menghapus  suatu  blog,  admin dapat klik tombol delete pada program yang ingin  dihapus  yang  terletak  disamping tombol edit yang dapat dilihat pada Gambar 17.
4. Implementasi Proses  pembuatan website (coding) dilakukan  ditahap  ini.  Pembuatan website menggunakan framework Laravel  dengan bahasa  PHP  ( Hypertext  Preprocessor ),  JS (Javascript),  Tailwind  CSS,  dan  database
MySQL  sebagai  tempat  penyimpanan  data. Setelah  itu, website juga  dihostingkan  di server sehingga bisa diakses secara online.

## 5. Blackbox Testing
Adapun  hasil  pengujian  halaman website terdapat pada tabel di bawah ini.
Tabel 1. Hasil Uji Blackbox Testing Ekspektasi Hasil Home User membuka website dan melihat halaman Home . OK About Us User bisa membuka  dan melihat halaman About Us . OK Programs User bisa melihat list program di halaman website. OK Contact Us User diarahkan untuk menghubungi pihak  Hongde College setelah mengklik button tersebut. OK Login Admin bisa membuka  dan melakukan login . OK Dashboard Admin bisa melihat dashboard setelah login . OK Programs Management Admin bisa melakukan CRUD program . OK Blogs Management Admin bisa melakukan CRUD Blog OK

## 5. KESIMPULAN
Berdasarkan  hasil  penelitian  yang  telah dilakukan, penulis menyimpulkan beberapa hal yaitu: • Website
Company profile yang dirancang telah sesuai dengan kebutuhan Hongde  College  dan  dapat  menjadi website identitas Hongde College. Selain itu, website ini  juga  dapat  menjadi sebagai  salah  satu  media  untuk  promosi dan  meningkatkan  visibilitas  diri  di zaman digital ini.
• Content  management  system yang dirancang mempermudah Hongde
College dalam memanajemen dan memperbarui  konten  seperti  blog  dan pengumuman.

## UCAPAN TERIMA KASIH
Selama  pelaksanaan  kegiatan  ini,  penulis mengucapkan  terima  kasih  kepada  seluruh pihak  yang  telah  memberi  dukungan  terhadap penelitian ini.

## DAFTAR PUSTAKA
[1]  D.  Rifai,  S.  Fitri,  and  I.  N.  Ramadhan, “Perkembangan  Ekonomi  Digital  Mengenai Perilaku  Pengguna  Media  Sosial  Dalam Melakukan  Transaksi,” ADI  Bisnis  Digit. Interdisiplin J. , vol. 3, no. 1, pp. 49–52, 2022, doi: 10.34306/abdi.v3i1.752.
[2]  P. Pangsa, P. Umkm, B. Melalui, P. Digital, and B.  Web,  “Peningkatan  Pangsa  Pasar  UMKM Batik  Melalui  Optimalisasi  Pemasaran  Digital Berbasis Web,” vol. 9, pp. 381–389, 2022.
[3]  S.  Sundari et  al. ,  “Pemasaran  Digital  Dalam Kewirausahaan,” WIKUACITYA  J.  Pengabdi. Kpd.  Masy. ,  vol.  1,  no.  1,  pp.  94–99,  2022, [Online]. Available: https://wikuacitya.unwiku.ac.id/JurnalWikuacit ya:JurnalPengabdianMasyarakat//94
[4]  A.  Noviantoro,  A.  B.  Silviana,  R.  R.  Fitriani, and  H.  P.  Permatasari,  “Rancangan  Dan Implementasi Aplikasi Sewa Lapangan Badminton  Wilayah  Depok  Berbasis  Web,” J. Tek.  dan  Sci. ,  vol.  1,  no.  2,  pp.  88–103,  2022, doi: 10.56127/jts.v1i2.108.
[5]  A.  M.  Rahmayanie,  A.  V.  Afiffah,  I.  D. Anggraini, H. D. Hermawan, L. Mukhlasin, and D. Kurniawan, “Pemanfaatan Digital Marketing Sebagai  Alternatif  Pengembangan  Strategi Marketing  di  Konveksi  BUMDes,” Bul.  KKN Pendidik. , vol. 4, no. 2, pp. 123–132, 2022, doi: 10.23917/bkkndik.v4i2.19186.
[6]  A.  R.  Utami,  N. :  Annisa,  and  R.  Utami,
“Pelatihan  Pembuatan Website Sebagai  Media Promosi  Digitat  Sepatu  Mojo,” SABANGKA ABDIMAS J. Pengabdi. Masy. , vol. 01, no. 02,
p. 141, 2022, [Online]. Available: https://sepatumojo.com/
[7]  S. Nurfadilah, “Perancangan Website Company profile Pada  UMKM  Orazio  Multiusaha Indonesia,” Appl. Bus. Adm. J. , vol. 1, no. 3, pp.
1–8, 2022.
[8]  D. A. Adnas and E. Sanjaya, “Perancangan dan Implementasi Website Company  profile di
Orions Box Indonesia,” vol. 5, no. September, pp. 477–483, 2023.
[9]  F.  King  Lie,  “Perancangan Company  profile Berbasis Website Pada  Toko  Sanjaya,”  vol.  5, no.  September,  pp.  733–741,  2023,  [Online]. Available: http://journal.uib.ac.id/index.php/nacospro [10] J. Pratama and I. W. Tong, “Implementasi Foto
Produk  dan  Katalog Company  profile di  PY Katindo Utama Menggunakan Metode MDLC,” Natl. Conf. Community Serv. Proj. , vol. 4, no. 1, pp.  1088–1093,  2022,  [Online].  Available: https://journal.uib.ac.id/index.php/nacospro/arti cle/view/7081
[11] D.  D.  Aulia,  S.  Aminah,  and  D.  Sundari,
“Perancangan  Prototype  Tampilan  Antarmuka Berbasis  Web  Mobile  Pada  Toko  Amira Kosmetik,” J.  Ilm.  Ilk.  -  Ilmu  Komp63.8uter Inform. ,  vol.  5,  no.  1,  pp.  29–40,  2022,  doi:
10.47324/ilkominfo.v5i1.134.
[12] D. Nurcahya, H. Nurfauziah, and H. Dwiatmodjo, “Comparison of Waterfall Models
and Prototyping Models of Meeting Management Information Systems,” J. Mantik , vol.  6,  no.  2,  pp.  1934–1939,  2022,  [Online]. Available: https://iocscience.org/ejournal/index.php/manti k/article/view/2677/2150
[13] M. R. Priyanto, B. Sintiawati, A. Ismawati, D. A. Andrianti, and R. L. S. Putra, “Creation of a Website -based  Information  System  at  Mutiara
Bunda Preschool using the Waterfall Method,” Instal  J. Komput. , vol. 15, no. 2, pp. 430–438,
2023.
[14] B. S. Indrajati, H. Fajri, and F. Fatimah, “Sistem Informasi Penjualan Pakaian Pada Dusty Room Berbasis Website ,” JITET  (Jurnal  Inform.  dan Tek. Elektro Ter. , vol. 12, no. 1, 2024.
[15] I.  F.  Ashari,  A.  J.  Aryani,  and  A.  M.  Ardhi, “Design  and  Build  Inventory  Management Information System Using The Scrum Method,”
J.  Sist.  Inf. ,  vol.  9,  no.  1,  pp.  27–35,  2022,
[Online]. Available:
https://joge.geutheeinstitute.com/index.php/jog ee/article/view/15
[16] N. L. G. P. Suwirmayanti, I. K. A. A. Aryanto, I. G. A. N. W. Putra, N. K. Sukerti, and R. Hadi,
“Penerapan Helpdesk System dengan Pengujian Blackbox Testing,” J. Ilm. Intech  Inf. Technol.
J.  UMUS ,  vol.  2,  no.  02,  2020,  doi: 10.46772/intech.v2i02.290.
[17] Y.  Christian  and  Kelvin,  “Perancangan  Dan Penerapan Sistem Pos (Point Of Sale) Berbasis Web  Pada  Warung  Zikry,” Conf.  Community Engagem. Projec , vol. 1, no. 1, p. 65, 2021.