Jurnal Teknik Informatika dan Sistem Informasi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 69-78 E- ISSN 2503-2933 69

## Rancang Bangun Website Pengenalan Profil Sekolah Madrasah Ibtidaiyah Qurrota A’yun Nglorog
Hafid Ardi Fatkhurrohman 1 , Fatah Yasin Al Irsyadi 2
L200190112@student.ums.ac.id, Fyai181@ums.id Fakultas Komunikasi dan Informatika, Informatika, Universitas Muhammadiyah Surakarta

## Abstrak
Madrasah  Ibtidaiyah  (MI)  Qurrota  a’yun  yang  berada  di  JL.  Ngrandu,  Nglorog,  Kec. Sragen,  Kabupaten  Sragen  Provinsi  Jawa  Tengah.  Salah  satu  madrasah  yang  menyampaikan masih  menggunakan  brosur  dan  undangan.  Brosur  tersebut  terdapat  profil,  prestasi,  ekstra kulikuler,  jalur  pendaftaran,  biaya,  dan  fasilitas.  Website  yang  dibuat  secara  responsive  agar mempermudah akses melalui beberapa platform. Metode dalam pembuatan website responsive dengan  menggunakan  Bootstrap  sebagai  framework  CSS.  Hasil  yang  diharapkan  website responsive  untuk  admin  dan  pengunjung  profil  madrasah  dengan  menggunkan  platform  yang mudah  diakses.  Dalam  website  tersebut  terdapat  halaman  yang  menampilkan  beranda,  profil sekolah,  prestasi,  guru,  dan  fasilitas.  Item-item  pada  halaman  website  memiliki  fungsi  dan informasi. Hasil akhir dari penelitian ini adalah sebuah sistem web yang memiliki fungsi dalam melakukan penyimpanan atau penyebaran informasi sekolah dan sebagai media pengenalan atau promosi  untuk  menarik  masyarakat  luas.  Berdasarkan  pengujian  black  box  dan  SUS, ditunjukkan  hasil  bahwa  sistem  dapat  berjalan  dengan  baik  dengan  skor  75,25  yang  artinya sistem dapat diterima dan layak digunakan.
Kata kunci: Website, Sekolah, Teknologi.

## Abstract
Madrasah  Ibtidaiyah  (MI)  Qurrota  a'yun  which  is  located  on  JL.  Ngrandu,  Nglorog, Kec. Sragen, Sragen Regency, Central Java Province. One of the madrasas who delivered was still  using  brochures  and  invitations.  The  brochure  contains  profiles,  achievements,  extra- curricular activities, registration paths, fees, and facilities. Websites that are made responsively to  facilitate  access  through  several  platforms.  Methods  in  making  responsive  websites  using Bootstrap  as  a  CSS  framework.  The  expected  results  are  responsive  websites  for  admins  and madrasa profile visitors using an easily accessible platform. On the website there is a page that displays the homepage, school profile, achievements, teachers, and facilities. The items on the web page have functions and information. The end result of this research is a web system that has a function in storing or disseminating school information and as a medium of introduction or promotion to attract the wider community. Based on black box and SUS testing, the results show that the system can run well with a score of 75.25, which means the system is acceptable and feasible to use.
Keywords : Website, School, Technology.

## 1. PENDAHULUAN
Perkembangan  teknologi  informasi  dalam  bentuk  website  saat  ini  begitu  penting sehingga  cukup  mendapat  perhatian  dan  masukan  dari  komunitas  sekolah,  masyarakat,  dan menjadi  trend  di  dunia  pendidikan  [1].  Sistem  informasi  memudahkan  siswa  dan  orang  tua untuk  mengakses  website  sekolah  untuk  mendapatkan  informasi tanpa  harus  pergi  ke  sekolah.
70 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 69-78 E-ISSN 2503-2933
Madrasah  Ibtidaiyah  (MI)  Qurrota  a’yun  yang  berada  di  JL.  Ngrandu,  Nglorog,  Kec.  Sragen, Kabupaten Sragen Provinsi Jawa Tengah menyampaikan informasi masih menggunakan brosur dan  undangan.  Website  digunakan  harus  responsive  untuk  memberikan  informasi  dan  dapat diakses  melalui  beberapa  platform.  Saat  mengakses  situs  web  dapat  digunakan  melalui komputer desktop, laptop, smartphone dan notebook.
Berdasarkan  permasalahan  diatas  peneliti  perlu  mengembangkan  sistem  informasi dalam  bentuk  website  yang  dapat  diakses  dimana  saja.  Untuk  membuat  website  responsive, peneliti  menggunakan  Bootstrap  sebagai  framework  CSS.  Bootstrap  sendiri  merupakan framework  CSS  yang  dapat  digunakan  untuk  membuat  pembuatan  web  responsive  menjadi mudah, gratis dan cepat [2].
Tema  Penelitian  mengenai  sistem  informasi  penerimaan  siswa  baru  sudah  banyak dilakukan  oleh  peneliti-peneliti  sebelumnya.  Berdasarkan  penelitian  oleh  Alyyuddin  dan  Yuni tahun  2019  tentang  sistem  informasi  sekolah  berbasis  web,  bahwa  tampilan  dan  penyajian informasi  yang  ditampilkan  sudah  baik,  akan  tetapi  data-data  sekolah  atau  dokumen  laporan yang  dimiliki  masih  kurang  dalam  hal  pengelolaan [3].  Selanjutnya  pada  penelitian penerapan teknologi  web  sekolah  Smp  Dan  Sma  Muhammadiyah  Kartasura  oleh  Anam  Sutopo  dan lainnya,  menghasilkan  website  yang  representatif  untuk  kegiatan  promosi  dan  administrasinya tetapi  masih  data  dan  informasi  yang  diberikan  masih  belum  lengkap  [4].  Kemudian berdasarkan  penelitian  oleh  Feni  Adhitia  tentang  sistem  informasi  profil  pimpinan  aisyiyah berbasis web, penelitian menghasilkan sistem yang bermanfaat dalam mengolah data pimpinan. Akan  tetapi,  website  tersebut  hanya  menampilkan  profil  anggota  pemimpin  dan akses  website mencakup admin dan user saja dimana aksesnya yang terbatas [5].
Penelitian ini dalam pengembangan sistem informasi pada di Madrasah Ibtidaiyah (MI) Qurrota  a’yun  memudahkan  akses  dan  responsive  web  dengan  halaman  admin  dan  tampilan depan yang dapat dilihat pengunjung. Tujuan penelitian ini untuk membuat website pengenalan profil  sekolah  madrasah  ibtidaiyah  qurrota  a’yun  nglorog.  Pengembangan  sistem  informasi sekolah ini menggunakan Bootstrap agar pengunjung ketika mengakses dari berbagai platform dapat mengakses informasi dengan tampilan yang dapat menyesuaikan dengan ukuran platform sehingga lebih nyaman untuk diakases.

## 2. METODE
Metode  dalam  penelitian  adalah  waterfall  mudah  dipahami  dan  diterapkan,  karena setiap  tahap  harus  diselesaikan  sebelum  tahap  berikutnya  dapat  dimulai  seperti yang  disajikan pada Gambar 1.
Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 69-78 E- ISSN 2503-2933 71

## Gambar 1. Metode Waterfall

## 2.1   Analisis
Analisis  sistem  ini  bertujuan  untuk  menggali  informasi  sebanyak-banyaknya  dari pengguna  agar  sistem  dapat  melakukan  tugas  sesuai  dengan  keinginan  pengguna  [6].  Analisis ini  terdiri  dari  kebutuhan  sistem  seperti  kebutuhan  hardware,  kebutuhan  software,  dan kebutuhan fungsional.

## 2.1.1  Kebutuhan Hardware
Penulis menggunakan hardware berupa laptop untuk mengembangkan sistem informasi sekolah ini dengan spesifikasi prosesor Ryzen 5 3550H, RAM 8 GB, penyimpanan HDD 1TB dan kartu grafis RX Radeon.

## 2.1.2  Kebutuhan Software
Perangkat lunak yang digunakan oleh penulis adalah XAMPP, Visual Studio Code, dan perangkat  lunak  untuk  mengakses  sistem  adalah  browser  Web  seperti  Google  Chrome  untuk melihat halaman sistem saat diimplementasikan.

## 2.1.3   Kebutuhan Fungsional
kebutuhan fungsional sistem ini terdiri dari admin dan user.
Admin  dalam  sistem  ini  dapat  melakukan  Login  dan  Logout  Akun,  dapat  melakukan  tambah, ubah,  hapus  data  yang  ada  pada  company  profile,  serta  dapat  menginputkan  data  guru,  profil, fasilitas, kegiatan, mata pelajaran dan ekstrakulikuler.
User  memiliki  akses  untuk  melihat  halaman  profil  sekolah  yang  berisi  jenis  informasi  yang berbeda  seperti  foto  sekolah,  data  guru,  profil,  fasilitas,  kegiatan,  mata  pelajaran  dan ekstrakulikuler.

## 2.2   Design System

## 2.2.1  Use Case Diagram
Sistem  company  profile  pada  MI  Qurrota  A’yun  dapat  diilustrasikan  menggunakan diagram use case yang ditunjukkan pada Gambar 2. Administrator diberikan akses untuk login, mengelola  informasi  sekolah,  melakukan  input  data,  dan  logout  akun.  Kemudian  bagi pengunjung diberikan akses untuk melihat keseluruhan halaman website company profile yang
72 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 69-78 E-ISSN 2503-2933
berisi  informasi  dan  data-data  yang  ada  pada  sekolah,  serta  melakukan  kontak  dengan  pihak sekolah untuk informasi lainnya yang perlu ditanyakan.
Gambar 2. Use Case Diagram Admin dan Pengunjung
2.2.2  Activity Diagram
Diagram  aktivitas  mewakili  urutan  arus  aktivitas  yang  digunakan  untuk menggambarkan riwayat aktivitas yang terbentuk pada sistem operasi [7]. Lihat Gambar 4, 5, 6, 7, dan 8 untuk informasi lebih lanjut mengenai aktivitas yang dilakukan.
Gambar 3. Activity Diagram Pengunjung Mengakses Halaman Profil Sekolah
Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 69-78 E- ISSN 2503-2933 73
Gambar  3  menunjukkan  diagram  aktivitas  untuk  melihat  halaman  profil  perusahaan. Pertama user masuk ke halaman profil perusahaan, kemudian user memilih menu pada halaman profil perusahaan. Sistem kemudian menyajikan menu pilihan pengguna.
Gambar 4. Activity Diagram Admin
Admin  melakukan  manajemen  pada  halaman  company  profile  sekolah.  Gambar  4 adalah  diagram  aktivitas  untuk  pengolahan  data.  Pertama,  seorang  administrator  memasuki halaman  login  dan  menampilkan  halaman  administrator.  Di  sini,  administrator  dapat  mengedit data  berupa  penambahan,  penghapusan,  dan  perubahan.  Data  yang  telah  diproses  disimpan dalam database.

## 2.2.3  Rancangan Database
Desain  basis  data  digunakan  untuk  menentukan  pola  hubungan  antar  data.  Hal  ini membutuhkan  representasi  sistematis  dalam  bentuk  tabel  data.  Database  pada  Gambar  5 merupakan  gambar  dari  database  fisik.  Database  company  profile  memiliki  enam  tabel diantaranya yaitu tabel admin, tabel profil, tabel guru, tabel ekstrakurikuler, tabel kegiatan, dan tabel  fasilitas.  Untuk  tabel  admin  memiliki  hubungan  relasi  mengelola  pada  setiap  tabel  yang ada.
74 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 69-78 E-ISSN 2503-2933
Gambar 5. Rancangan Database

## 2.3   Coding
Program atau pengkodean yang merupakan langkah menerapkan desain yang telah diubah menjadi  kode  pemrograman  untuk  membuat  program  komputer.  Website  ini  dibuat  dengan menggunakan bahasa pemrograman PHP native. Penulis juga menggunakan Javascript dan CSS dengan bantuan framework Bootstrap agar website lebih responsive [8].

## 2.4   Testimg
Menemukan  kesalahan  dan  bug  dalam  suatu  sistem  memerlukan  melakukan  tahap pengujian atau testing [9]. Sistem yang dibuat oleh seorang penulis harus diuji terlebih dahulu sebelum  diimplementasikan  atau dipublikasikan.  Dalam  studi  ini, penulis  menjalankan dua  tes untuk  melihat  apakah  sistem  yang  mereka  buat  mengandung  bug.  Pengujian  pertama  adalah pengujian  black  box  dan  pengujian  kedua  adalah  dengan  menggunakan  uji  System  Usability Scale  (SUS)  ala  kuesioner.  Penilaian  dilakukan  terhadap  aplikasi  yang  dikembangkan  untuk memeriksa apakah aplikasi berkinerja baik dan diterima dengan baik oleh pengguna [10].

## 2.5 Maintenance
Fase pemeliharaan sistem, pemeliharaan ini dilakukan setelah sistem selesai. Pemeliharaan ini meliputi perbaikan kesalahan untuk memenuhi kebutuhan pengguna [11].

## 3. HASIL DAN PEMBAHASAN
Tampilan Sitem, yaitu berupa halaman home website MI Qurrota A’yun dengan beberapa menu  yang  terdiri  dari  menu  yaitu  profil,  berita,  pengumuman,  agenda,  guru,  dan  galeri. Halaman home ini merupakan konten umum yang disajikan kepada pengunjung untuk menarik minat  mereka.  Halaman  home  user  ditampilkan  pada  Gambar  6  dan  halaman  Admin  pada Gambar 7.
Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 69-78 E- ISSN 2503-2933 75
Hafid, et., al [Rancang Bangun Website Pengenalan Profil Sekolah Madrasah Ibtidaiyah Qurrota A’yun Nglorog]
Gambar 6. Halaman Home User
Gambar 7. Halaman Admin
76 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 69-78 E-ISSN 2503-2933
Tabel 1. Hasil Pengujian Black Box Halaman User atau Pengguna No Kelas Uji Skenario Harapan Hasil 1. Menu  home,  profil, berita,pengumuman, agenda,  guru,  galeri, kritik dan saran User  memilih  menu  home, profil, berita, pengumuman, agenda, guru,  galeri,  kritik  dan saran Menampilkan halaman home,  profil, berita,  pengumuman,  agenda,  guru, galeri, kritik dan saran Valid Tabel 2. Hasil Pengujian Black Box Admin No Kelas Uji Skenario Harapan Hasil 1. Menu dashboard Setelah  login  menampilkan halaman dashboard Menampilkan halaman dashboard Valid 2. Menu profil sekolah Klik  menu  sejarah,  visi  misi, dan sarana prasarana Edit  data  sejarah,  visi  misi, dan sarana prasarana Menampilkan  halaman  sejarah,  visi misi, dan sarana prasarana. Data  sejarah,  visi  misi,  dan  sarana prasarana berhasil di update Valid 3. Menu data website  Klik menu pengumuman, agenda sekolah, berita, galery Tambah  data  pengumuman, agenda sekolah, berita, galery Edit data pengumuman, agenda sekolah, berita, galery Hapus data pengumuman, agenda sekolah, berita, galery Menampilkan halaman pengumuman, agenda sekolah, berita, galery. Berhasil menambah data pengumuman, agenda sekolah, berita, galery. Data  pengumuman,  agenda  sekolah, berita, galery berhasil di update. Berhasil menghapus data pengumuman, agenda sekolah, berita, galery Valid 4. Menu guru Klik menu guru Tambah data guru Update data guru Hapus data guru Menampilkan halaman guru Berhasil menambah data guru Data guru berhasil diupdate Berhasil menghapus data guru Valid 5. Menu video Klik menu video Tambah data video Update data video Hapus data video Menampilkan halaman video Berhasil menambah data video Data videoberhasil diupdate Berhasil menghapus data video Valid 6. Menu logout Klik menu logout Menampilkan halaman login Valid Tabel 3. Daftar Pertanyaan Pengujian SUS Kode Pertanyaan P1 Saya pikir saya akan sering menggunakan sistem P2 Saya menemukan sistem ini membingungkan P3 Saya pikir system sangat mudah untuk digunakan P4 Saya pikir akan membutuhkan pertolongan dari teknisi untuk menggunakan sistem P5 Saya menemukan fungsi pada sistem ini bekerja dengan baik P6 Saya merasa terdapat banyak ketidakkonsistenan pada sistem P7 Saya pikir orang lain akan mudah menggunakan sistem ini P8 Saya pikir sistem tidak efesien untuk digunakan P9 Saya pikir tidak terdapat hambatan dalam menggunakan sistem P10 Saya harus belajar terlebih dahulu sebelum menggunakan sistem
Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 69-78 E- ISSN 2503-2933 77
Tabel 4. Skor Nilai SUS Skor Tingkatan Kategori <51 E Awful 51-58 D Poor 68 C OK 68-80,3 B Good >80,3 A Excellent Tabel 5. Hasil Uji SUS

## 4. PENUTUP
Sistem  website  pengenalan  profil  sekolah  pada  Madrasah  Ibtidaiyah  Qurrota  A’yun Nglorog  seperti  profil,  berita,  pengumuman,  agenda,  guru,  galery,  kritik  dan  saran.  Adanya sistem  ini  dapat  menjadikan  daya  tarik  sekolah  kepada  masyarakat  luas  atau  sebagai  media promosi  dan  sebagai  pusat  penyebaran  informasi  sekolah  sehingga  informasi  yang  diberikan bisa  lebih  efektif  dan  efisien.  Hasil  pengujian  black  box  diketahui  bahwa  semua  fungsi  yang ada  dapat  bekerja  dengan  baik.  Sementara  itu,  pengujian  System  Usability  Score  (SUS)  juga mendapatkan  skor  75,25  dengan  kategori  Good  yang  artinya  sistem  dapat  diterima  dan digunakan oleh pengguna.

## DAFTAR PUSTAKA
[1] A.  Christian,  S.  Hesinto,  and  Agustina, “Rancang  Bangun  Website  Sekolah  Dengan Menggunakan  Framework  Bootstrap,”  J.  Sisfokom  (Sistem  Inf.  dan  Komputer) ,  Vol.  7, No. 1, pp. 22–27, 2018.
[2] M. F. Santoso, “Teknik Responsive Web Design Bootstrap 4 Serta Penerapannya Dalam Rancang Bangun Layout Web,” J. Pilar Nusa Mandiri , Vol. 15, No. 1, pp. 61–68, 2019, doi: 10.33480/pilar.v15i1.101.
0 5 10 15 20 25 30 35 40 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
Uji SUS P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 Jumlah Skor
78 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 69-78 E-ISSN 2503-2933
[3] E.  P.  Sari,  A.  Wahyuni,  and  N.  Narti, “Sistem  Informasi  Sekolah  Berbasis  Web  (Studi Kasus : TK Kusuma Putra Kota Mojokerto),” Indones. J. Softw. Eng. , Vol. 5, No. 1, pp. 87–94, 2019.
[4] H.  Supriyono et  al. , “Penerapan  Teknologi  Web  Sekolah  Bagi  SMP  dan  SMA Muhammadiyah  Kartasura,”  War.  LPM ,  Vol.  19,  No.  1,  pp.  39–52,  2016,  doi: 10.23917/warta.v19i1.1983.
[5] F.  Adhitia  and  A.  Fatmawati, “Sistem  Informasi  Profil  Pimpinan  Aisyiyah  Berbasis Web,” 2018.
[6] T. Y. Na, J. Liu, S. Nur Abdul Salam, and A. Abdul Mutalib, “Redesigning of PefaMall TM :  The  E-commerce  Website,” No.  July,  pp.  25–27,  2018,  [Online].  Available: http://www.kmice.cms.net.my/
[7] M.  T.  Prihandoyo, “Unified  Modeling  Language  (UML)  Model  Untuk  Pengembangan Sistem Informasi Akademik Berbasis Web,” J. Inform. J. Pengemb. IT , Vol. 3, No. 1, pp. 126–129, 2018.
[8] N.  Akter, “A  Web-Based  System  For  School  Management  By,” Vol.  66,  No.  May,  pp. 37–39, 2018, [Online]. Available: https://www.fairportlibrary.org/images/files/RenovationProject/Concept_cost_estimate_a ccepted_031914.pdf
[9] F.  Rahman  and  S.  Ratna, “Perancangan  E-Learning  Berbasis  Web  Menggunakan Framework  Codeigniter,”  Technol.  J.  Ilm. ,  Vol.  9,  No.  2,  p.  95,  2018,  doi: 10.31602/tji.v9i2.1370.
[10]  M.  A.  Algoniu,  S.  A.  Wicaksono,  and  T.  Afirianto, “Pengembangan  Sistem  Informasi Manajemen  Sarana  Prasarana  (Studi  pada:  SMK  Muhammadiyah  1  Malang),” J. Pengemb. Teknol. Inf. dan Ilmu Komput. e-ISSN , Vol. 2548, No. 7, p. 964X, 2019.
[11]  Y.  Wijaya,  Rahmaddeni,  and  F.  Zoromi, “Chatbot  Designing  Information  Service  for New Student Registration Based on AIML and Machine Learning,” JAIA - J. Artif. Intell. Appl. , Vol. 1, No. 1, pp. 01–10, 2020, doi: 10.33372/jaia.v1i1.638.