## JURNAL ABDIMAS BUDI DARMA

## Implementasi Framework Bootstrap untuk Sistem Infromasi Sekolah (Study Kasus: MI Tahdzibul Akhlaq Lamongan)
Siti Mujilahwati 1* , Dimas Lugiantoro Suko 2 , Rizki Iwan Laksana 3 , M Ari Zidan Syafrizal 4 1,2,3,4 Program Studi Teknik Informatika, Fakultas Teknik, Universitas Islam Lamongan, Indonesia Jln. Veteran No.53 A Lamongan, Lamongan, Jawa Timur, Indonesia
Email: 1* moedjee@unisla.ac.id , 2 dimslugiantoro09@gmail.com, 3 rizkiiwan17@gmail.com, 4 zidanerizal17@gmail.com (*: coressponding author)

## Abstrak
Kegiatan Kuliah Kerja Nyata atau disingkat dengan KKN, telah dilaksanakan pada Desa Karangbinangun Kabupaten Lamongan. Sekolah MI Tahdzibul Akhlaq lebih tepatnya merupakan sekolah tingkat dasar yang terdaftar secara resmi pada  kemendikbud  dibawah  naungan  kementerian  agama  dan  memiliki  peringkat  akreditasi  A.  Permasalahan  dari sekolah  adalah  tidak  memiliki  sistem  informasi  sekolah  berbasis  digital.  Sehingga  kami  memberikan  solusi  sebagai bentuk  kontribusi  mahasiswa  Teknik  Informatika  untuk  masyarakat  desa  dalam  penerapan  ilmu  akademik  telah membuat sebuah sistem informasi pada sekolah tersebut.. Bootstrap memiliki keutamaan open source dan gratis, serta mendukung mobile view memberikan banyak keuntungan dalam pembuatan sistem informasi ini. Untuk mendapatkan hasil  kerja  yang  terurut,  ketepatan  waktu  dan predictable maka  pembuatan  sistem  menggunakan  metode  SDLC (Software Development Life Cycle). Beberapa fitur informasi di dalam website telah dibuat seperti Beranda, Tentang, Foto Kegiatan, Susunan Personalia, Ekstrakulikuler dan Kontak Sekolah. Website informasi yang dibuat selanjutnya dipublikasikan secara online, dengan kemudahan akses dimanapun dan dengan perangkat mobile seperti handphone maka sistem informasi ini dapat memberikan manfaat baik dari pihak sekolah dan pihak luar.
Kata Kunci: Bootstrap, website sekolah, Sistem Informasi

## Abstract
Real  Work  Lecture  activities  or  abbreviated  as  KKN,  have  been  carried  out  in  Karangbinangun  Village,  Lamongan Regency. MI Tahdzibul Akhlaq School is more precisely an elementary level school that is officially registered with the Ministry of Education and Culture under the auspices of the Ministry of Religious Affairs and has an A accreditation rating. So we provide solutions as a form of contribution of Informatics Engineering students to rural communities in the application of academic science has made an information system at the school. Bootstrap has the virtue of being open  source  and  free,  and  supporting  mobile  views  provides  many  advantages  in  the  creation  of  this  information system.  To  get  sequential  work  results,  timeliness  and  predictable,  the  system  is  made  using  the  SDLC  (Software Development Life Cycle) method. Several information features on the website have been created such as Home, About, Activity Photos, Personnel Structure, Extracurricular and School Contacts. The information website that is created is then published online, with easy access anywhere and with mobile devices such as mobile phones, this information system can provide benefits both from the school and outside parties.
Keywords: Key Bootstrap, school website, Information System

## 1. PENDAHULUAN
Kuliah  Kerja  Nyata  (KKN)  merupakan  sebuah  program  pwngabdian  kepada  masyarakat  bagi mahasiswa, sebagai bentuk tri darma perguruan tinggi(KKN, 2022; Syardiansah, 2019). KKN dilaksanakan dengan datang langsung kepada masyarakat desa ini biasa disebut sebagai mitra. Mahasiswa diwajibkan dapat tanggap atas permasalahan mitra tempat KKN. Mahasiswa juga diharapkan dapat memberikan solusi atas permasalahn tersebut untuk menjawab tantangan sebagai agen of change(KKN, 2022; Muniarty dkk., 2022). Dari berbagai masalah yang diperoleh tentunya akan ada masalah prioritas untuk dapat dipcahkan dengan solusi yang diberikan. Dalam hal ini mahasiswa Teknik informatika menemukan permasalahan yang ada pada mitra yaitu Sekolah MI Tahdzibul Ulum, terkait website sekolah.
Seiring  perkembangan  teknologi  dan  untuk  meningkatkan  kemampuan  mahasiswa,  maka mahasiswa harus mampu dan bermanfaat untuk masyarakat dengan ilmu yang dimiliki(Ahmad Ulil Albab Al Umar dkk., 2021). Teknologi digital yang sudah tidak dapat dibatasi penggunaanya baik di desa maupun diperkotaan, baik untuk bisnis, pemerintahan maupun sekolahan. Untuk itu masyarakat desa harus mampu memanfaatkan teknologi tersebut supaya mampu bersaing pada media digital. Terutama pada sekolahan, untuk  meningkatkan  kepercayaan  dan  akredibitas  sekolah  harus  mampu  memberikan  informasi  secara jelas  kepada  masyarakat  luas.  Sekolah  MI  Tahdzibul  Akhlaq  lebih  tepatnya  merupakan  sekolah  tingkat dasar yang terdaftar secara resmi pada kemendikbud dibawah naungan kementerian agama dan memiliki peringkat  akreditasi  A,  sangat  disayangkan  apabila  tidak  memiliki  sistem  informasi  digital.  Website merupakan salah satu media informasi digital yang sering digunakan oleh sekolah seperti pada sekolah yang diterbitkan pada beberapa artikel (Afriansyah dkk., 2021; Feladi & Marlianto, 2023; Fitria dkk., 2021; Nuryansyah dkk., 2020). Penggunaan handphone oleh masyarakat menjadikan akses informasi lebih cepat, untuk itu sistem infromasi berbasis website harus mampu menyesuaikan perangkan yang digunakan oleh pengguna  untuk  menaces  website  tersebut  sesuai  dengan  ukuran  perangkat.  Bootstrab  mampos

## JURNAL ABDIMAS BUDI DARMA
memberikan  solusi  dari  permasalahan  tersebut.  Bootstrap  adalah  kerangka  pengembangan open  source front-end dan  gratis  untuk  pembuatan  situs  web  dan  aplikasi  web(Jefri  Yonata,  2022;  Kaban,  2017). Dirancang  untuk  memungkinkan  pengembangan  situs  web  mobile-first  yang  responsif,  Bootstrap menyediakan  kumpulan  sintaksis  untuk  desain  template  sehingga  mudah  diimplementasikan.  Kerangka pengembangan ini telah diimplementasikan beberapa website sekolah yang telah diterbitkan pada sebuah jurnal(Patra dkk., 2018; Suprayogi & Rahmanesa, 2019).
Penelitian ini menggunakan metode SDLC (Software Development Life Cycle), SDLC digunakan untuk membangun sistem informasi dan memastikan bahwa sistem dapat berjalan dengan baik. Dalam rekayasa sistem dan rekayasa perangkat lunak, SDLC (Systems Development Life Cycle), Siklus Hidup Pengembangan Sistem,  atau  Siklus  Hidup  Sistem  adalah  proses  pembuatan  dan  perubahan  sistem,  serta  model  dan metodologi yang digunakan untuk mengembangkan sistem tersebut. Konsep ini biasanya mengacu pada sistem komputer atau informasi. Pola pengembangan sistem perangkat lunak SDLC terdiri dari tahap-tahap seperti rencana, analisis, desain, implementasi, uji coba, dan pengelolaan(Bulman, 2017; Putra, 2020).
Dari beberapa definisi dan latar belakang ini maka pembuatan website sebagai informasi sekolah MI Tahdzibul Akhlaq  yang bersifat reponsif sangat diperlukan sebagai media promosi dan pengenalan sekolah pada  pihak  luar  secara  online.  Website  sekolah  sebagai  media  informasi  yang  telah  dibuat  dengan framework bootstrab telah dipublikasin secara online dengan kemudahan akses dimanapun dan dengan perangkat mobile seperti handphone maka sistem informasi ini dapat memberikan manfaat baik dari pihak sekolah dan pihak luar.

## 2. TINJAUAN PUSTAKA

## 2.1 Sistem Informasi
Menutut  para  ahli  sistem  informasi  adalah  suatu  infrastruktur  yang  mengintegrasikan  berbagai elemen  seperti  teknologi,  manusia,  prosedur,  dan  data  untuk  mengelola  informasi  dan  mendukung operasional  serta  pengambilan  keputusan  dalam  suatu  organisasi  (Annisa  Medina  Sari,  2023).  Dengan adanya komponen input, model, output, teknologi, basis data dan kontrol, maka sistem informasi dapat mengumpulkan, mengolah, dan menyajikan informasi yang relevan dan bermanfaat bagi organisasi serta membantu dalam pengambilan keputusan dan operasional sehari-hari(Annisa Medina Sari, 2023).

## 2.2 Website Sekolah
Website sekolah adalah situs web khusus yang digunakan oleh lembaga pendidikan. Selain itu juga dapat digunakan oleh siswa untuk mencari informasi tentang sekolah dan sebagai alat untuk mendukung proses  pembelajaran.  Website  sekolah  sangat  penting  karena  dapat  membantu  orang  tua  dan  siswa menemukan informasi terbaru tentang kegiatan belajar mengajar di sekolah(Zakir, 2016). Website sekolah memiliki banyak fitur canggih yang memungkinkan Anda mendapatkan akses ke informasi yang lebih detail tentang profil siswa, sekolah, dan kegiatan di dalamnya. Selain itu, berbagai software pendukung tersedia. Ini termasuk penerimaan siswa baru secara online, pengumuman kelulusan, pendidikan e-learning, dan raport  online  (Eka  Susiyanti,  2022).  Terdapat  beberapa  fitur  dasar  pada  sebuag  website  sekolah,  yaitu slider,  Profil  Sekolah,  Informasi  Guru  dan  Tenaga  Kependidikan,  Kegiatan  Sekolah,  Prestasi,  Blog,  dan Galeri(Alfadhylla Rosalina, 2022).

## 2.3 Bootstrap
Bootstrap  adalah  sebuah  framework  yang  digunakan  untuk  mendesain  website  secara  cepat  dan mudah.  Bootstrap  terdiri  dari  komponen-komponen  berbasis  HTML,  CSS,  dan  JavaScript  yang  dapat digunakan untuk membangun tampilan dan fungsionalitas website (Jefri Yonata, 2022; Rosid & Jakaria, 2016; Zakir, 2016) . Bootstrap awalnya dibuat oleh Mark Otto dan Jacob Thornton dari Twitter pada tahun 2011, dan dulunya dikenal sebagai Twitter Blueprint. Bootstrap telah meraih popularitas yang tinggi dan digunakan oleh banyak website di seluruh dunia, mencapai 27% dari semua website. Hal ini disebabkan oleh kesederhanaan dan konsistensi yang ditawarkan oleh Bootstrap(Mirza M. Haekal, 2021).
Bootstrap memungkinkan pengguna untuk mendesain komponen website tanpa perlu menulis kode dari awal. Framework ini menyediakan file CSS dan JavaScript yang siap digunakan dalam bentuk class. Bootstrap menyediakan berbagai class yang lengkap, termasuk class untuk layout halaman, menu navigasi, animasi, dan lainnya. Bootstrap mendukung desain responsif dengan menggunakan sistem grid yang terdiri dari containers, baris, dan kolom. Hal ini memungkinkan website yang dibangun dengan Bootstrap untuk tampil rapi dan konsisten di berbagai perangkat, seperti smartphone, tablet, dan laptop. Berikut adalah framework bootstrap  di akses  apada  laman https://getbootstrap.com/docs/5.3/getting- started/introduction/

## JURNAL ABDIMAS BUDI DARMA
Gambar 1. Framework Bootstrap
Jika  ingin  menggunakan  framework  ini  maka  pertama  harus  download  sesuai  versi  terbaru, selanjtunya melakukan instalasi pada computer, selanjutnya harus memiliki code editor seperti visual code , dan web browser .

## 3. METODE PELAKSANAAN
Kuliah Kerja Nyata ini dilakukan dalam waktu 3 minggu dilokasi mitra yaitu Desa Karangbinangun, Lamongan.  Akan  tetapi  kegiatan  menyelesaikan  website  ini  dilakukan  dalam  beberapa  waktu  sebelum program  KKN  selesai.  Selain  mengerjakan  aplikasi  website  sebagai  luaran  solusi  mitra,  mahasiswa  juga telah  melakukan  kegiatan  kemsyarakatan  lainnya.  Metode  yang  digunakan  untuk  membangun  website sebagai sara media informasi berbasis online pada sekolah MI Tahdzibul Akhlaq   adalah SDLC (Systems Development Life Cycle), Metode SDLC juga disebut model waterfall adalah model pengembangan software yang  dianalogikan  dengan  air  terjun,  dengan  tiap  tahapannya  dilakukan  secara  berurutan  dari  atas  ke bawah. Ada lima tahapan pada metode waterfall : Analisi Kebutuhan, desain, implementasi, pengujian, dan perawatan. Model ini diGambarkan Pada Gambar Berikut.
Gambar 2. Model Waterfall
1. Analisis Kebutuhan.
Untuk mengembangkan suatu perangkat lunak pengembang harus mengetahui dan memahami berbagai sumber informasi sebagai kebutuhan pengembangan pengembangan perangkat lunak tersebut.
2. Desain.
Hasil dari analisis kebutuhan yang selanjutnya dilakukan desain pengembangan perangkat lunak.
3. Impementasi. Tahap  implementasi  ini  memungkinkan  pengembang  membutuhkan  berbagai  modul-modul  sesuai dengan kebutuhan desain yang sudah direncanakan sebelumnya. Seperti pada pembuatan website pada penelitina ini membutuhkan beberapa modul yang saling terintegrasi dari bootstrap, code editor dan juga web browser untuk implementasi website.
4. Pengujian. Pengujian  adalah  melakukan  percobaan  sistem  perangkat  lunak  secara  keseluruhan,  semisal  pada pembuatan website sekolah ini dengan menjalankan semua fitur yang sudah dibangun sesuai model sebelumnya. Apakah sudah memenuhi target apa belum.
5. Perawatan. melakukan perbaikan dan perawatan selama perangkat lunak ini sudah dijalankan. Dari perawatan ini salah satunya adalah dapat melakukan pengembangan. Ada beberapa code tidak sesuai dengan versi yang terbaru, untuk menghindari permasalahn ini maka perangkat lunak harus dilakukan perawatan.
Analisis Kebutuhan Desain Implementasi Pengujian Perawatan

## JURNAL ABDIMAS BUDI DARMA

## 4. HASIL DAN PEMBAHASAN
Berdasarkan hasil analisis pada sekolah MI Tahdzibul Akhlaq merupakan sekolah tingkat dasar yang memiliki cukup banyak siswa, kegiatan, prestasi dan juga potensi tenaga pendidik yang baik. Permasalahan yang ada adalah sekolah ini belum memiliki media informasi digital. Seiring perkembangan zaman yang sudah  serba  digital  ini  maka  penting  dan  diperlukan  pembuatan  sistem  informasi  digital  yaitu  website sekolah.  Untuk  itu  untuk  mengatasi  masalah  tersebut  dirancang  sebuah  desain  sistem  untuk  membuat website ini dari hasil analisis.
Gambar 3 . Desain Sistem Informasi Sekolah MI Tahdzibul Akhlaq
Dari desain sistem tergambar ada dua user yaitu pengunjung website dan admin yang mengelola halaman  informasi  pada  website.  Dalam  pembuatan  sistem  ini  mitra  bertindak  sebagai  admin  yang mengoperasikan  website  setelah  dibangun.  Sehingga  dapat  dideskripsikan  luaran  dari  KKN  ini  adalah terbentuknya sebuah aplikasi  informasi berbasis website bersifat online. Dengan fitur yang didesain maka selanjutnya hasil implementasi sebagai berikut.
1. Halaman Beranda
Gambar 4. Halaman Beranda Versi web dan Handphone
Halaman  beranda  ini  berisi  header  slide  bar  yang  memberikan  menu  fitur  yang  dapat  dipilih  oleh pengunjung. Slide bar ini di isi dengan 3 gambar header yang bisa bergerak secara otomatis dalam waktu tertentu.

## JURNAL ABDIMAS BUDI DARMA

## 2. Halaman Tentang
Gambar 5. Halaman Tentang
Halaman tentang ini berisi identitas dari sekolah MI Tahdzibul Akhlaq, ada vivi dan misi serta tujuan dari sekolah ini.
3. Halaman Foto Kegiatan
Gambar 6. Halaman Foto Kegiatan
Halaman Foto Kegiatan berisi beberapa foto kegiatan siswa-siswi sekolah MI Tahdzibul Akhlaq.
4. Halaman Susunan personalia
Gambar 7. Halaman Susunan Personalia
Halaman ini dibuat untuk memberikan informasi personalia, dari kepala sekolah sampai staf pengajar dan staf di sekolah.
5. Halaman Ekstrakulikuler

## JURNAL ABDIMAS BUDI DARMA
Halaman Ini berisi kegiatan ektrakulikuler yang ada disekolah, serta jumlah peminatan yang diikuti oleh siswa-siswi MI Tahdzibul Akhlaq.
6. Halaman Kontak
Gambar 9. Halaman Kontak
Halaman ini berisi media komunikasi dari pengunjung kepada sekolah melalui admin, dengan halaman ini pengunjung dapat mengirim pertanyaan, atau lainnya. Selain disediakan media berkomunikasi, pada halaman ini juga disediakan berbagai informasi social media yang dimiliki oleh MI Tahdzibul Akhlaq.
Dengan adanya sstem aplikasi online ini maka dampak yang dapat dilihat adalah tersebar luasnya informasi  terkait  Sekolah  MI  Tahdzibul  Akhlaq.  Untuk  dapat  menjalankan,  mengoperasikan  dan mengembangkan  sistem  lebih  lanjut  maka  admin  atau  mitra  mendapatkan  pembekalan  dan  pelatihan, berikut adalah gambar yang menunjukkan hal tersebut.

## Gambar 10. Pembekalan dan Pelatihan Staf Admin

## 5. KESIMPULAN
Dari hasil program Kuliah Kernya Nyata (KKN) yang dilakukan, mahasiswa Teknik Informatika telah memberikan kontribusi keilmuannya dengan membuat sistem informasi sekolah di desa Karangbinangun. Sistem Informasi yang dibuat berupa website dan dibangun dengan menggunakan framework Bootstrap. Bootstrap yang diterapkan berjalan dengan baik sehingga website bersifat responsive. Sistem informasi yang  dihasilkan  bersifat  responsive  dan  dapat  diakses  dimanapun  dan  kapanpun.  Website  sekolah  ini memberikan dampak yang positif baik untuk sekolah, desa dan masyarakat luas. Sistem Informasi belum dimaksimalkan secara professional seperti penerimaan penerimaan peserta didik baru secara online, tetapi hanya website sistem informasi standart sekolah.

## Daftar Pustaka
Afriansyah, R., Mubaroh, S., & Pratiwi, I. R. (2021). Pembuatan Portal Website Sekolah SMA Negeri 1 Sungailiat Sebagai Media Informasi . 5 (1), 154–160. Ahmad Ulil Albab Al Umar, O., Salsa Nur Savitri, A., Sryta Pradani, Y., Khamid, N., & Salatiga, I. (2021). PERANAN KULIAH KERJA NYATA SEBAGAI WUJUD PENGABDIAN KEPADA MASYARAKAT DI TENGAH PANDEMI COVID-19(STUDI KASUS IAIN SALATIGA KKN 2021). Jurnal Pengabdian Kepada Masyarakat , 01 (01).

## JURNAL ABDIMAS BUDI DARMA ISSN: 2745- 5319 (Media Online)
ALFADHYLLA  ROSALINA.  (2022,  September  22). 10+  Fitur  yang  Harus  Ada  di  Website  Sekolah . https://techarea.co.id/fitur-website-sekolah/. Annisa Medina Sari. (2023, Juni 10). Pengertian Sistem Informasi . https://fikti.umsu.ac.id/pengertian-sistem-informasi- adalah/.
Bulman, M. (2017). SDLC - Waterfall Model. The Independent .
Eka  Susiyanti.  (2022,  Februari  25). Pentingnya  Website  Sekolah  yang  Wajib  Guru  Ketahui! https://naikpangkat.com/pentingnya-website-sekolah-yang-wajib-guru-ketahui/. Feladi,  V.,  &  Marlianto,  F.  (2023). Pengembangan  Sistem  Informasi  Sekolah  Berbasis  Web  Di  SMA  Wisuda  Pontianak Diajukan : Diterima : Diterbitkan : 11 (1), 61–67. Fitria, C. N., Hermawan, H. D., Sayekti, I. C., & Selfia, K. D. (2021). Pengembangan Digitalisasi Sekolah Berbasis Website pada Era Komputasi Global di SMP Muhammadiyah . 3 (1), 1–10. https://doi.org/10.23917/bkkndik.v3i1.14665 Jefri Yonata. (2022). Apa itu Bootstrap? Fungsi, Kelebihan, dan Kekurangannya. Dalam Dewaweb.Com .
Kaban, R. (2017). Design Website Responsive dengan Bootstrap. Dalam CC BY-ND . KKN, B. P. (2022). Kuliah Kerja Nyata. Buku Panduan Kkn . Mirza  M.  Haekal.  (2021,  Agustus  16). Bootstrap:  Pengertian,  Kegunaan,  Kelebihan,  dan  Kekurangannya . https://www.niagahoster.co.id/blog/bootstrap-adalah/. Muniarty, P., Wulandari, W., Pratiwi, A., & Rimawan, M. (2022). PENGABDIAN KEPADA MASYARAKAT MELALUI KULIAH KERJA  NYATA  SEKOLAH  TINGGI  ILMU  EKONOMI  BIMA. Journal  of  Empowerment , 2 (2). https://doi.org/10.35194/je.v2i2.1586
Nuryansyah, A., Nuryansyah, A., Ratnawati, D., Pendidikan, P., Informasi, T., Humaniora, F., & Yogyakarta, U. T. (2020).
Pengembangan Sistem Informasi Sekolah Berbasis Website Di SMK Taman Karya Madya Ngemplak . 1 (2), 21–31.
Patra,  J.,  Kelurahan,  N.,  Kecamatan,  S.,  Selatan,  P.,  &  Selatan,  S.  (2018). Rancang  Bangun  Website  Sekolah  Dengan Menggunakan Framework Bootstrap ( Studi Kasus SMP Negeri 6 Prabumulih ) . 07 , 22–27.
Putra. (2020). Pengertian SDLC adalah: Fungsi, Metode, dan Tahapan SDLC. Dalam Salamadian Muda & Berilmu . Rosid, M. A., & Jakaria, R. B. (2016). IMPLEMENTASI FRAMEWORK TWITTER BOOTSTRAP DALAM PERANCANGAN APLIKASI PENERIMAAN MAHASISWA BARU BERBASIS WEB. KINETIK , 1 (3). https://doi.org/10.22219/kinetik.v1i3.121 Suprayogi,  B.,  &  Rahmanesa,  A.  (2019).  Penerapan  Framework  Bootstrap  dalam  Sistem  Informasi  Pendidikan  SMA Negeri 1 Pacet Cianjur Jawa Barat. TEMATIK , 6 (2). https://doi.org/10.38204/tematik.v6i2.244 Syardiansah,  S.  (2019).  PERANAN  KULIAH  KERJA  NYATA  SEBAGAI  BAGIAN  DARI  PENGEMBANGAN  KOMPETENSI MAHASISWA. JIM UPB (Jurnal Ilmiah Manajemen Universitas Putera Batam) , 7 (1). https://doi.org/10.33884/jimupb.v7i1.915 Zakir,  A.  (2016).  RANCANG  BANGUN  RESPONSIVE  WEB  LAYOUT  DENGAN  MENGGUNAKAN  BOOTSTRAP FRAMEWORK. InfoTekJar (Jurnal Nasional Informatika dan Teknologi Jaringan) , 1 (1). https://doi.org/10.30743/infotekjar.v1i1.31