312 Jurnal Teknik Informatika dan Sistem Informasi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 312-321 E-ISSN 2503-2933

## Perancangan Sistem Informasi Website Multiuser

## Menggunakan PHP-HTML Dan Pengolahan Data Menggunakan Google Data Studio Di BKB Nurul Fikri
Muhamad Rio Ramdani 1 , Cahyadi Agustin 2
1, 2 Politeknik Piksi Ganesha Bandung; Jl. Gatot Subroto No.301, Meleer, Kec. Batununggal, Kota Bandung, Jawa Barat 40274, (022) 87340030
3 Sistem Informasi, IT & Komputer, Bandung Email : * 1 riormdan14@gmail.com, 2 cahyadi.agustin3@gmail.com

## Abstrak
Seiring  pesatnya  perkembangan  internet  saat  ini  yang  sangat  berpengaruh  terhadap kehidupan  manusia,  internet  memudahkan  kita  dalam  hal  mengakses  informasi-informasi penting  yang  dapat  dilakukan  dimanapun  dan  kapanpun  tidak  tergantung  pada  lokasi  atau waktu.  Dengan  demikian  hal  ini  dapat  dimanfaatkan  oleh  sebuah  perusahaan  dalam  hal penyebaran  dan  penerimaan  informasi  melalui  internet.  Oleh  karena  itu  pada  penelitian  ini akan dikembangkan sebuah website pengolah data berbasis online, sehingga dapat mendukung proses  penyebaran  dan  penerimaan  informasi  yang  berisikan  data-data  perusahaan.  Untuk metode yang digunakana dalam perancangan ini adalah Observation yaitu pengumpulan data melalui pengamatan secara langsung. Untuk Bahasa pemerograman menggunakan PHP-HTML sedangkan  untuk  basis  data  menggunakan  MySQL  /  XAMPP.  Dengan  dibuatnya  website berbasis online ini diharapkan dapat mempermudah pengguna dalam melakukan analisa data dan menentukan sebuah keputusan berdasarkan data-data yang ada.
Kata kunci : Website, PHP-HTML, MySQL / XAMPP

## Abstract
Along  with  the  rapid  development  of  the  internet  today  which  is  very  influential  on human life, the internet makes it easier for us to access important information that can be done anywhere  and  anytime,  not  depending  on  location  or  time.  Thus  this  can  be  utilized  by  a company in terms  of  dissemination and  receipt  of information  via the  internet. Therefore,  this research  will  develop  an  online-based  data  processing  website,  so  that  it  can  support  the process of distributing and receiving information containing company data. The method used in this  design  is  Observation,  which  is  collecting  data  through  direct  observation.  The programming language uses PHP-HTML while the database uses MySQL / XAMPP. With the creation of an online-based website, it is hoped that it will make it easier for users to analyze data and make decisions based on existing data.
Keyword : Website, PHP-HTML, MySQL / XAMPP
Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 312-321 E- ISSN 2503-2933 313

## 1. PENDAHULUAN
Di  era  global  sekarang  ini,  website  merupakan  salah  satu  sistem  yang  sangat  penting bagi sebuah perusahaan [1] , untuk memperoleh kinerja yang maksimal dibutukan sebuah media yang dapat membantu pengguna untuk menganalisa data secara cepat dan akurat, juga dapat di akses  dimana  saja  dan  kapan  saja  dan  dapat  dijalankan  di  berbagai  perangkat  seperti, Smartphone, Laptop, atau melalui jaringan server/warnet.
Bimbingan  dan  Konsultasi  Belajar  Nurul  Fikri  (BKB  Nurul  Fikri)  merupakan  salah satu institusi pendidikan yang berada di bawah naungan PT Nurul Fikri Bina Prestasi. BKB Nurul  Fikri  dirintis  sejak  tahun  1985  oleh  sekumpulan  mahasiswa  dan  sarjana  muslim Universitas  Indonesia  [2].  yang  dalam  pelaksanaannya  terdapat  beberapa  kegiatan  seperti Analisa  data,  penyampaian  dan  penerimaan  data  yang  bertujuan  untuk  menentukan  sebuah keputusan berdasarkan data-data yang ada.
Kemajuan  alat  komunikasi  juga  semakin  mempermudah  penyebaran  dan  perolehan informasi  dari berbagai sumber terutama untuk berbagai pengambilan keputusan dalam sebuah perusahaan [3].
Pemanfaatan  media  internet  juga  membatu  dalam  memudahkan  penyampaian  dan penerimaan informasi [4] , sehingga media ini dapat memudahkan pengguna dalam menganalisa data-data yang ada.
Membangun  Sistem  Informasi  (SI)  perusahaan  bukan  sekadar  mengotomatisasi sebagian  proses  yang  secara  rutin  dilakukan,  melainkan  menciptakan  suatu  aliran  informasi yang  baru    yang    secara    sistematis    dan    terintegrasi    disusun    menjadi  sebuah  sistem  yang terpadu.  Selaras  dengan  perkembangan  teknologi  informasi,  membangun  sebuah  sistem informasi bertujuan untuk membantu meningkatkan kinerja dan operasional kantor [5].
Penelitian  dengan  judul  “Pemanfaatan  Google  Spreadsheet  dan  Google  Data  Studio Sebagai Dashboard Suhu Dan Kelembaban Di Laboratorium ” menghasilkan sebuah dashboard yang dapat membantu petugas laboratorium dapat memperoleh informasi secara cepat dan tepat untuk  mengambil  sebuah  tindakan  atau  sebuah  keputusan  secara  efektif  dan  efisien  mengenai kondisi suhu dan kelembaban di laboratorium secara online [6].
Pada  penelitian  sebelumnya  didapatkan  kesimpulan  bahwa  pembuatan website yang berisikan data-data spreadsheet diperlukan sebagai sebuah sarana yang dapat mewadahi seluruh data-data dari perusahaan dan juga dapat memberikan sebuah tampilan yang lebih menarik dan user friendly.
Oleh karena itu fokus utama dalam perancangan sistem informasi ini adalah bagaiamana mengolah informasi sebaik-baiknya agar dapat menjadi alat batu bagi sebuah perusahaan dalam menganalisa data-data yang ada [7].

## 2. METODE PENELITIAN
Dalam  perancangan  Sistem  Informasi  Website  Multiuser  Menggunakan  PHP-HTML Dan  Pengolahan  Data  Menggunakan  Google  Data  Studio  Di  BKB  Nurul  Fikri,  peneliti menggunakan Metode Analisis Deskriptif, menurut Prof. Dr. Sugiyono adalah cara ilmiah yang digunakan untuk mendapatkan dan mengumpulkan data untuk tujuan atau kegunaan tertentu [8]. Lalu    metode    yang    digunakan    ialah    metode  waterfall    dengan    teknik    analisis  menurut Sommerville dengan tahapan sebagai berikut [9] :
314 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 312-321 E-ISSN 2503-2933
a. Requirement Analysis
Tahapan  awal  yang  dilakukan  untuk  mengembangkan  program  yang  akan  dibuat.  Dalam tahapan ini peneliti mencari data pada radio, dimana pengumpulan data secara fisik ataupun non fisik.
b. System Design
Dalam  tahapan  ini  peneliti  melakukan  perancangan  pembuatan  aplikasi  sebelum  memulai pengkodean.  Untuk    desain    sistem,    penelitian  menggunakan    ERD    ( Entity    Relationship Diagram )  dan  LRS    ( Logical  Record  Structure ).  Menurut    Yasin    dalam  (Hidayat,    2017), “ERD  merupakan suatu  rancangan  atau bentuk hubungan sesuatu kegiatan yang berkaitan langsung  dan  mempunyai  fungsi  di  dalam  proses  tersebut”.  Sedangkan  LRS  merupakan representasi dari struktur record-record pada tabel-tabel yang terbentuk dari hasil relasi antar himpunan entitas. Priyadi dalam (Hidayat, 2017)
c. Implementation
Setelah  sistem  selesai  didesain,  tahap  selanjutnya  adalah menerapkan  desain  tersebut ke    dalam  pengkodean.Peneliti  menggunakan HTML sebagai      bahasa      markup,      PHP sebagai  bahasa  pemrograman, Framework  Bootstrap dan Codeigniter serta  bantuan  teks editor Visual Studio Code .
d. Integration & Testing
Pada tahap ini aplikasi diintegrasikan dengan database MySQL dan diuji. Peneliti melakukan pengujian  aplikasi  menggunakan black-box  testing .  Menurut  (Mustaqbal  &  Firdaus,  Fajri Firdaus, Rahmadi, 2015), “ Black-Box  Testing merupakan  pengujian  yang  berfokus  pada spesifikasi  fungsional  dari  perangkat lunak, tester dapat mendefinisikan kumpulan kondisi input dan melakukan pengetesan pada spesifikasi fungsional program”
e. Operation & Maintenance
Tahap  akhir,  peneliti  melakukan maintenance atau  pemeliharaan  dan  perbaikan  terhadap aplikasi yang sudah dibuat.

## 3. HASIL DAN PEMBAHASAN
Dari  penelitian  berikut  menjelaskan  bahwa  Perancangan  Sistem  ini  menggunakan Bahasa  pemerograman  PHP  dan  HTML  serta  data  yang  diolah  menggunakan  Google  Data Studio.
HTML  ( Hypertext  Markup  Language )  adalah  sebuah  bahasa  markah  yang  digunakan untuk  membuat  sebuah  halaman  web,  menampilkan  berbagai  informasi  di  dalam  sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Pada HTML dipergunakan hypertext  link atau  hubungan  antara  teks  dan  dokumen  lain.  Dengan  demikian  pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah.
PHP adalah singkatan dari “ PHP: Hypertext Prepocessor ”, yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan  bisa  digunakan  bersamaan  dengan  HTML.  PHP  diciptakan  oleh  Rasmus  Lerdorf  pertama kali tahun 1994. PHP banyak dipakai untuk memrogram situs web dinamis [10]. Google  Data  Studio adalah  program  visualisasi  data  yang  dirancang  sebagai  alat  yang mudah digunakan untuk mewakili kumpulan data yang kompleks dengan cara yang menarik dan jelas. Dengan menggunakan Google Data Studio anda dapat dengan mudah memvisualisasi data anda tanpa harus memiliki kemampuan programming [11].
Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 312-321 E- ISSN 2503-2933 315
3.1. Context Diagram
Context Diagram ialah gambar yang menjelaskan alur antara satu user dan banyak user lainnya mengenai hak akses ke fungsi-fungsi yang ada didalamnya.
Alur hak akses terhadap menu dan database yang digambarkan oleh Contex Diagram , yaitu  Untuk  Admin  atau  Kepala  Regional  dapat  melihat  semua database yang  ada,  data Regional, Area dan Lokasi. Untuk Kepala Area hanya dapat melihat data Area dan Lokasi yang bersangkutan. Untuk Staf Lokasi hanya dapat melihat data lokasinya saja.
Gambar 1 merupakan Context Diagram yang diusulkan dan Table 1 menjelaskan sistem hak akses pada website.

## Gambar 1. Contex Diagram
Tabel 1. Deskripsi Context Diagram No Level User Deskripsi Kepala  Regional  melakukan  login  untuk  mendapat  akses  ke website. 1 Kepala Regional Kepala Regional mempunyai hak akses secara penuh terhadapat Database yang ada di dalamnya. Kepala  Regional  dapat  melihat  menu-menu  dan  data-data  yang ada di setiap Area dan Lokasi. Kepala area melakukan login untuk mendapat akses ke website. Kepala  Area  hanya  mempunyai  akses  terhadap  areanya  sendiri dan lokasi-lokasi yang berada dibawahnya 2 Kepala Area Kepala  Area  tidak  mempunyai  akses  terhadap  menu-menu Regional. Kepala  Area  tidak  mempunyai  akses  terhadap  menu-menu  di Area lain. Staf Lokasi melakukan login untuk mendapat akses ke website Staf Lokasi hanya mempunyai akses terhadap Lokasinya sendir 3 Staf Lokasi Staf  Lokasi  tidak  mempunyai  akses  terhadap  menu-menu  di lokasi lain Staf  Lokasi  tidak  mempunyai  akses  terhadap  menu-menu Regional dan Area
316 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 312-321 E-ISSN 2503-2933

## 3.2. Entity Relationship Diagram
Entity Relationship Diagram adalah sistem dalam database yang berfungsi memodelkan struktur  relasi  antar  data.  Diagram  ini  berfungsi  untuk  merancang  suatu  database  dan mendefinisikan relasi antar objek.
Berikut  adalah  alur  login  ke  dalam  website  yaitu  setiap  user  harus  memasukan username dan password berupa kode lokasi dan kode area masing-masing, sistem login ini yang akan menyeleksi setiap user yang ada.
Gambar 2 merupakan Entity Relationship Diagram yang diajukan oleh peneliti:
.
Gambar 2. Entity Relationship Diagram

## 3.3. State Machine Diagram
State  Machine  Diagram menggambarkan  aktivias  yang  dilakukan  oleh  sistem,  untuk dapat meninjau data-data sesuai dengan hak akses masing-masing user.
Setelah  sukses  melakukan  login,  user  akan  dialihkan  ke  beranda  website  dimana terdapat menu-menu database yang dapat diakses sesuai dengan hak akses masing-masing user.
Gambar 3 merupakan State Machine Diagram yang diajukan oleh peneliti :
Gambar 3. State Machine Diagram

## 3.4. Secuence Diagram
Secuence  Diagram menjelaskan  tentang  validasi  data  yang  dilakukan  oleh  sistem,  yang berfungsi  memberikan  hak  akses  kepada  setiap  user  terhadap  database  dan  menu-menu  yang terdapat didalamnya.
Mendeskripsikan  sistem  yang  ada  pada  website  ini,  ketika  user  melakukan  login  sistem akan melakukan validasi data yang bertujuan untuk menentukan hak akses dari setiap user yang berbeda-beda.
Gambar 4 merupakan Secuence Diagram yang diajukan oleh peneliti:
Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 312-321 E- ISSN 2503-2933 317

## Gambar 4. Secuence Diagram

## 3.5. Implementasi Sistem
1. Form Login
Form  login  merupakan  menu  yang  muncul  pertama  kali  saat user  mengakses  halaman  atau link website tersebut.
Pada  form  login  menampilkan  Username  dan  Password  yang  harus  di  isi  oleh  user,  form login  ini  yang  akan  mengidentifikasi  level  user  berdasarkan  Username  dan  Password. Gambar 5 merupakan Form Login yang diajukan oleh peneliti:
Gambar 5. Form Login
318 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 312-321 E-ISSN 2503-2933
2. Beranda Website
Beranda  website  merupakan  menu  pertama  setelah  user  sukses  melakukan  login.  Pada halaman beranda, terdapat beberapa menu yang dapat diakses yang berisikan data-data dari perusahaan,
Gambar 6 merupakan Beranda Website yang diajukan oleh peneliti:
Gambar 6. Beranda Websie
3. Kategori User
Terdapat 3 kategori user pada website ini, Kepala Regional, Kepala Area, dan Staf  Lokasi. Hak  akses  pada  setiap  user  berbeda  beda,  menyesuakikan  dengan  struktur  organisasi  yang ada pada perusahaan tersebut .
a) Kepala Regional
Kepala Regional merupakan bagian tertinggi diantara user lain, sehingga untuk menu atau hak  akses  Kepala  Regional  dapat  melihat  semua  database  yang  ada  di  perusahaan tersebut.
Gambar 7 merupakan menu user (Kepala Regional) yang diajukan oleh peneliti:
Gambar 7. Menu User (Kepala Regional)
Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 312-321 E- ISSN 2503-2933 319
b) Kepala Area
Kepala  Area  merupakan  pimpinan  dari  beberapa  lokasi,  sehingga  untuk  menu  atau  hak akses  Kepala  Area  dapat  melihat  lokasi-lokasi  yang  ada  dibawahnya  tetapi  tidak  dapat melihat database di Area lain.
Gambar 8 merupakan menu user (Kepala Area) yang diajukan oleh peneliti :
Gambar 8. Menu User (Kepala Area)
c) Staf Lokasi
Staf  Lokasi  merupakan  cabang-cabang  dari  perusahaan,  total  terdapat  28  lokasi  yang terbagi  ke  dalam  8  Area,  sehingga  untuk  menu  atau  hak  akses  Staf  Lokasi  hanya  dapat melihat database pada lokasi tersebut, dan tidak bisa melihat data di lokasi lain. Gambar 9 merupakan menu user (Staf Lokasi) yang diajukan oleh peneliti :
Gambar 9. Menu User (Staf Lokasi)
320 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 312-321 E-ISSN 2503-2933

## 3.6. Pengujian Sistem
Setelah  membuat  sistem  maka  dilakukan  pengujian  sistem  sebelum  digunakan  oleh user,  metode    pengujiannya    disini    merupakan    metode    pengujian    Blackbox    Testing    yang merupakan  metode  pengujian  fungsional  tanpa  menguji  design  atau  tampilan  dengan  kode program.
Tabel 2 di bawah ini merupakan hasil dari pengujian Black Box.
No Sekenario Pengujian Hasil yang diharapkan Hasil Pengujian Kesimpulan 1 Login menggunakan akun Kepala Regional Masuk ke menu Beranda dan terdapata menu- menu Regional Berhasil Valid 2 Login mengguakan akun Kepala Area Masuk ke menu Beranda dan hanya terdapat menu-menu Area Berhasil Valid 3 Login menggunkan akun Staf Lokasi Masuk ke menu Beranda dan hanya terdapat menu-menu Staf Lokasi Berhasil Valid 4 Login menggunakan akun yang salah Diam  di  halaman  login, dan  muncul  notifikasi username  dan  password tidak sesuai Berhasil Valid

## 4. KESIMPULAN
Berdasarkan  hasil  analisis  dan  perancangan  website  multiuser  BKB  Nurul  Fikri, sehingga dicapai hasil bahwa Sistem Informasi Website Multiuser ini dapat mendukung dalam penyampaian dan penerimaan informasi secara lebih cepat dan lebih lengkap. Penerapan sistem ini juga  bertujuan  untuk  memungkinkan  user  agar  dapat  menganalisa  data  secara  lebih  efisien dan efektif.

## 5. SARAN
Saran berikut diberikan untuk aplikasi yang akan dikembangkan dimasa mendatang:
1. Diharapkan  rancangan  ini  dapat  dipakai  sebagai  referensi  dalam  pengembangan  sistem dimasa mendatang.
2. Diharapkan penelitian selanjutnya berupa aplikasi yang berbasis web & mobile
3. Studi  selanjutnya  kemunginan  akan  menggunakan  metode  yang  berbeda  dan  lebih terbarukan.

## UCAPAN TERIMA KASIH
Terimakasih  kepada  PT.  BKB  Nurul  Fikri  yang  sudah  memberikan  izin  untuk melakukan  penelitian  ini  dan  membuat  Sistem  Informasi  ini,  serta  terimakasih  kedapa  rekan- rekan di PT. BKB Nurul Fikri yang telah membantu dan memberikan materi sehingga penelitian ini dapat tercapai sesuai keinginan.
Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 312-321 E- ISSN 2503-2933 321

## DAFTAR PUSTAKA
[ 1 ] M. Kristiyanti Jurusan KPN STIMART and S. Lisda Rahmasari , “Website sebagai Media Pemasaran Produk-Produk Unggulan UMKM di Kota Semarang,” 2015.
[2] Bimbel  Nurul  Fikri, “Sejarah  Singkat  Bimbingan  dan  Konsultasi  Belajar  Nurul  Fikri,” Bimbel  Nurul  Fikri, 2023.  https://www.bimbelnurulfikri.id/profil/  (Accessed  Jun.  28, 2023).
[3] A.  Iman  Ritonga,  R.  Hambali  Hasibuan,  R.  Adha  Rahman  Pohan,  and  K.  Nisa  Lubis, “Peran  Teknologi  Dalam  Perkembangan  E-Business,” VISA:  Journal  of  Visions  and Ideas , Vol. 3, No. 2, p. 434, 2023.
[4] P.  Studi et  al ., “Pemanfaatan  Media  Sosial  Dalam  Pemasaran  Produk  UMKM  Di Kelurahan  Sidokumpul,  Kabupaten  Gresik,” Jurnal  Ilmu  Komunikasi ,  Vol.  10,  No.  1, 2020, doi: 10.15642/jki.2019.9.2.239-263.
[5] D.  Kontesa,  M.  Siahaan,  and  S.  Informasi, “Analisis  Pengaruh  Sistem  Informasi Akuntansi Manajemen Terhadap Kinerja Manajerial pada PT. POS Indonesia (Persero) Kota Bandar Lampung.”
[6] Heri  Purnadi, “Pemanfaatan  Google  Spreadsheet  dan  Google  Data  Studio  Sebagai Dashboard  Suhu  dan  Kelembaban  di  Laboratorium,” Insan  Metrologi  PPSDK ,  Vol.  1, No. 1, pp. 28–33, Dec. 2021, doi: 10.55101/ppsdk.v1i1.639.
[7] A.  Saprun  Haris,  S.  Fadli,  A.  Tantoni,  P.  Studi  Teknik  Informatika  Sekolah  Tinggi Manajemen  Informatika  dan  Komputer  Lombok,  J.  Basuki  Rahmat  No,  and  L.  Tengah, “Sistem Manajemen Lembaga Penelitian dan Pengabdian Kepada Masyarakat Berbasis Web,” Jurnal Manajemen informatika & Sistem Informasi , Vol. 2, No. 1, 2019, [Online]. Available: http://e-journal.stmiklombok.ac.id/index.php/misi
[8] Syahya  Rembulan,  “ Pengertian  Metode  Penelitian  Menurut  Para  Ahli ,” Mei  7,  2022 . https://www.pinhome.id/blog/apa-itu-metode-penelitian/ (accessed Jun. 28, 2023).
[9] I.  Maryani,  F.  Fandi,  D.  Imaniawan,  and  Y.  A.  Puspa ,  “Penerapan  Metode  Waterfall Pada  Aplikasi  Pengelolaan  Iklan  Berbasis  Web  Radio  Yasika  FM  Purwokerto,” Indonesian  Journal  on  Software  Engineering  (IJSE), Vol.  7,  No.  1,  pp.  110–119,  2021, [Online]. Available: http://ejournal.bsi.ac.id/ejurnal/index.php/ijse
[10]  Andreas Dan, “Pengertian HTML, PHP, CSS, Java Script dan XML,” 6 December 2015 . https://andreasdan.com/html-php-css-javascript-xml/ (accessed Jun. 28, 2023).
[11]  D.  Fernando, SNARTISI  Seminar  Nasional  Rekayasa  Teknologi  Informasi  Visualisasi Data Menggunakan Google Data Studio .