## Perancangan Sistem Informasi Media Pembelajaran Pada Taman Kanak- Kanak Kali Bening Berbasis Web
Muklas Adi Putra 1,* , Suendri 1 , Indah Ananda 2
1 Sains dan Teknologi, Sistem Informasi, Universitas Islam Negeri Sumatera Utara, Medan, Indonesia
2 Tarbiyah dan Ilmu Keguruan, Pendidikan Islam Anak Usia Dini, Universitas Islam Negeri Syekh Ali Hasan Ahmad Addary, Padangsidempuan, Indonesia
Email: 1,* muklasputra222@gmail.com, 2 suendri@gmail.com, 3 idhananda1@gmail.com Email Penulis Korespondensi: muklasputra222@gmail.com
Abstrak- Dalam kegiatan pembelajaran, terkadang siswa mudah bosan dengan penjelasan dari seorang guru. Termasuk anak-anak usia dini yang masih memiliki rasa ingin bermain-main, dengan pembelajaran secara manual atau formal pastinya akan membuat anak-anak mudah bosan.  Maka  dari  itu  penulis  bertujuan  mengubah  cara  pembelajaran  dengan  memperkenalkan  pembelajaran  berbasis  web.  Untuk memotivasi kreaktivitas anak dengan cara belajar menggunakan inovasi teknologi yang ada pada saat ini. Sehingga anak-anak tidak terlalu bosan  dalam  belajar  dikelas  setiap  harinya(kecuali  hari  libur).  Penulisa  melakukan  pengamatan  secara  langsung  terhadap  objek,  untuk mengetahui  metode  pembelajaran  apa  yang  diterapkan  di  TK  Kali  Bening.  Menggunakan  aplikasi  berbasis  web  yang  dirancang menggunakan bahasa pemrorgraman dan MySQL sebagai database server.

## Kata Kunci : Sistem Informasi; Webl Anak usia dini
Abstract- In learning activities, sometimes students easily get bored with an explanation from a teacher. Including young children who still have a sense of wanting to play, manual or formal learning will certainly make children easily bored. Therefore the author aims to change the  way  of  learning  by  introducing  web-based  learning.  To  motivate  children's  creativity  by  learning  to  use  existing  technological innovations. So that children are not too bored in learning in class every day (except holidays). The author makes direct obs ervations of objects,  to  find  out  what  learning  methods  are  applied  in  Kali  Bening  Kindergarten.  Using  a  web-based  application  designed  using  a programming language and MySQL as a database server.
Keywoard : Information Systems; Web; Early Childhood

## 1. PENDAHULUAN
Di era yang penuh dengan teknologi pada saat ini, tak membuat keheranan jika anak dibawah umur sudah mengerti dengan handphone  atau  semacamnya.  Dalam  belajar  yang  masih  menggunakan  cara  manual  atau  formalnya  pengajaran  dikelas, terkadang  membuat  bosan  setiap  siswa  termasuk  anak  usia  dini  pada  Taman  Kanak-Kanak(TK).  Dalam  hal  tersebut pembelajaran  perlu  ditingkatkan  dengan  mengikuti  perkembangan  teknologi  pada  era  saat  ini,  untuk  mengembangkan kreatifitas  setiap  anak-anak  dan  menumbuhkan  rasa  bersemangat  dalam  pembelajaran  di  kelas  [1].  Dengan  memberikan pembelajaran  menggunakan  inovasi  teknologi,  membuat  anak-anak  menjadi  senang  dalam  melakukan  pembelajaran  [2]. Sudah ada beberapa pengembangan teknologi yang dilakukan oleh para pengembang, khususnya berbasis web [3]. Maka dari itu  penulis  ingin  meningkatan  cara  belajar  pada  TK  Kali  Bening  menggunakan  aplikasi  berbasis  web  yang  dibuat  untuk membantu anak-anak supaya tidak bosan dalam pembelajaran.
Web dapat diartikan sebagai kumpulan halaman yang digunakan untuk menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan  atau  gabungan dari semuanya, bauk yang bersifat  statis maupun dinamis yang membentuk  satu rangkain bangunan yang saling terkait [4]. Web dapat dibuat menggunakan bahasa pemrograman PHP ataupun HTML, pada pembuatan web ini menggunakan bahasa pemrograman PHP, HTML dan CSS. HTML (Hypertext Markup Language) adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari WWW (world wide web) sebuah teknologi inti dari internet. HTML dirancang dan diatur oleh sebuah badan standarisasi dunia yang khusus menangani web, yaitu W3C (World Wide  Web  Consortium).  Hal  ini  dikarenakan  tiap-tiap  program  web  browser  menerjemahkan  kode-kode  HTML  secara berbeda-beda, sehingga di perlukan sebuah standar yang sama untuk seluruh browser [5]. Website adalah sebuah perangkat lunak yang berisi file seperti gambar atau teks yang terhubung dalam sebuah internet. Sumber informasi yang di buat dalam bentuk HTML dan digunakan pengguna web dengan bantuan navigasi ke halaman selanjutnya [6].  Untuk  membuat  sebuah web dapat   dilakukan   dengan   mengikuti   beberapa tahap. Tahap    pertama    adalah    mempelajari bagaimana sebuah web bekerja. Selanjutnya tahap  kedua  adalah  mempelajari  HTML,  tahap ketiga  adalah  mempelajari CSS untuk memberikan desain  dan  tampilan  yang  bagus  pada  website  [7].  HTML  berfungsi  sebagai  pondasi  sebuah  halaman  website  dan  CSS merupakan  pengembangan  dari  HTML  dalam  format  dokumen  web.  Adanya  CSS  memudahkan  kita  untuk  mengatur  dan memilih tampilan pada web [8]. Web HTML dipilih karena sistemnya yang mudah untuk dibuat, termasuk bagi para pemula. Maka  dari  itu  untuk  meningkatkan  media  pembelajaran  di  TK  Kali  Bening,  penulis  memilih  dengan  menggunakan  web sebagai uji coba penerapan pembelajaran pada TK Kali Bening.
Tujuan dari penelitian ini yaitu untuk menumbuhkan motivasi  kepada anak-anak yang bosan belajar secara formal, mengenalkan teknologi kepada anak usia dini dan menerapkan pembelajaran menggunakan sistem informasi.
BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Online) Vol 3, No 1, Desember 2022 DOI 10.47065/bulletincsr.v3i1.192 | Hal 30 − 36 https://hostjournals.com/bulletincsr

## 2. METODOLOGI PENELITIAN
Metode  yang  digunakan  pada  penelitian  ini  yaitu  Metode  Observasi.  Melakukan  pengamatan  langsung  terhadap  TK  Kali Bening untuk mengetahui sistem pembelajaran di sekolah tersebut. Dalam penelitian ini terdapat beberapa tahapan, seperti pada Gambar 1. dibawah ini.
Identifikasi Masalah
MULAI Pengumpulan Data SELESAI Perancangan Web
Pengujian Sistem
Gambar 1. Tahapan Penlitian
Pada Gambar 1. ada beberapa tahapan untuk memperkuat artikel ini. Tahapan awal yaitu mengindentifikasi masalah pada  objek  penelitian. Selanjutnya  mengumpulkan  data  dengan  melakukan  observasi  dan  mengumpulkan  data  dari  artikel ataupun buku. Langkah ketiga yaitu merancang web, desain web dan button pada web menggunakan bahasa pemrograman yang diperlukan. Langkah terakhir menguji sistem dari perancangan web yang telah selesai dilakukan.

## 1. Identifikasi Masalah
Untuk mengidnetifikasi masalah, penulis melakukan observasi untuk menemukan masalah yang dapat diselesaikan. Setelah menemukan masalah yang ada, penulis melakukan pengumpulan data dari beberapa artikel ataupun buku.
2. Pengumpulan Data
a. Studi Pustaka
Penulis mendapatkan data dengan menggunakan beberapa referensi seperti artikel dan e-buku yang berkaitan dengan topik penelitian.
b. Observasi
Penulis  melakukan  pengamatan  terhadap  objek  penelitian  untuk  mendapatkan  data-data  serta  hal  yang  diperlukan untuk memperkuat hasil dari artikel ini.
3. Perancangan Web
Perancangan web dilakukan untuk membuat desain web, sistem web serta tampilan pada web yang akan diterakan terhadap objek  penelitian.  Web  dirancang  menggunakan  bahasa  pemrograman  PHP,  HTML  dan  CSS.  Aplikasi  berbasis    web    di rancang  menggunakan  bahasa  pemrograman  PHP  dan  MySQL  sebagai  database  server [9].
a. Hypertext Preprocessor (PHP)
PHP adalah bahasa  pemrograman  yang  sebenarnya  mirip  dengan  JavaScript  dan Python.  Perbedaannya  adalah, PHP  sering  kali  digunakan  untuk  komunikasi  sisi  server,  sedangkan JavaScript bisa digunakan untuk frontenddan backend [10].
b. Hypertext Markup Language (HTML)
HTML  digunakan  untuk  memberikan  struktur  dan  format  pada  sebuah  dokumen.  HTML  terdiri  dari  tag  yang digunakan untuk menandai bagian dari dokumen, seperti judul, paragraf, dan tabel [11].
c. Cascading Style Sheets (CSS)
CSS digunakan untuk mengatur beberapa komponen dalam web sehigga web lebih terstruktur dan  seragam. CSS bukan termasuk bahasa pemrograman, CSS dianggap sebagai styles dalam aplikasi pengolahan kata [12].
4. Pengujian Sistem
Setelah melakukan perancangan web, maka harus dilakukan pengujian sistem pada web agar dapat diketahui kegagalan pada sistem web yang sudah dirancang sebelumnya.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Pengamatan Terhadap Objek
Pengamatan  dilakukan  untuk  mengetahui  proses  pembelajaran  yan  sedang  terjadi,  pada  Gambar  2.  Anak-anak  sedang melakukan proses pembelajaran seperti biasa di iringi dengan bermain.
BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Online) Vol 3, No 1, Desember 2022 DOI 10.47065/bulletincsr.v3i1.192 | Hal 30 − 36 https://hostjournals.com/bulletincsr
Gambar 2. Observasi Objek Penelitian

## 3.2 Perancangan Web
Setelah  melakukan  pengamatan,  maka  selanjutnya  melakukan  perancangan  pada  web  yang  akan  dijadikan  sistem pembelajaran pada TK Kali Bening. Langkah awal  dalam membuat  web yaitu membuat  database  untuk  menyimpan data. Setelah itu melakukan perancangan pada web, tampilan awal seperti pada Gambar 3. dibawah ini.
Gambar 3 . Tampilan Awal Web
Pada Gambar 3. tampilan awal langsung menampilkan menu utama, yang berisi beberapa button seperti membaca, mengaji, menghitung, latihan dan pengaturan.Tampilan membaca seperti pada Gambar 4. dibawah ini.
Gambar 4. Tampilan Menu Membaca
BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Online) Vol 3, No 1, Desember 2022 DOI 10.47065/bulletincsr.v3i1.192 | Hal 30 − 36 https://hostjournals.com/bulletincsr
Button selanjutnya yaitu Mengaji, pada tampilan mengaji berisi huruf-huruf hijaiyah dasar dan memiliki tanda baca seperti pada Gambar 5.
Gambar 5. Tampilan Menu Mengaji
Setelah belajar mengaji, maka guru akan memberikan pengajaran tentang mengitung. Dengan mengklik button menghitung, maka akan muncul tampilan seperti pada Gambar 6.
Gambar 6. Tampilan Menu Menghitung
Setiap  button  pada  Gambar  6.  akan  menampilkan  perhitungan  tentang  penjumlahan,  pengurangan,  perkalian  dan pembagian  1-10.  Setelah  belajar  tentang  perhitungan,  anak-anak  akan  diperintahkan  untuk  mengerjakan  latihan  dengan mengklik button latihan dan akan muncul tampilan seperti pada Gambar 7.
Gambar 7. Tampilan Menu Latihan
Untuk login sebagai admin, maka klik button pengaturan. Langkah awal akan muncul tampilan seperti pada Gambar 8. dibawah ini.
Gambar 8. Tampilan Login Admin
Setelah login sebagai admin, maka admin dapat mengelola materi untuk latihan atau kuis seperti pada Gambar 9.
Gambar 9. Tampilan Admin
Setelah perancangan web selesai, maka langkah selanjutnya melakukan pengujian sistemnya. Untuk mengetahui sistem yang tidak berfungsi seperti button dan sound pada web.

## 3.3 Pengujian Sistem
Pengujian sistem dilakukan untuk mengetahui apakah keseluruhan sistem pada web yang dirancang berfungsi dengan baik. Seperti button untuk menampilkan menu sesuai perintah yang sudah dirancang. Dari pengujian yang telah dilakukan seluruh button yang ada pada tampilan awal berfungsi dengan baik, dan berfungsi sesuai dengan yang diperintahkan.
BULLETIN OF COMPUTER SCIENCE RESEARCH ISSN 2774-3659 (Media Online) Vol 3, No 1, Desember 2022 DOI 10.47065/bulletincsr.v3i1.192 | Hal 30 − 36 https://hostjournals.com/bulletincsr
Tabel 1. Button Sistem Icon Button Name Function Status menu_membaca Untuk menampilkan huruf, angka, nama hewan dan alat transportasi On menu_latihan Untuk menampilkan menu untuk soal latihan On menu_mengaji Menampilkan huruf hijaiyah On menu_menghitung Menampilkan pilihan untuk perhitungan(penjumlahan, perkalian, pembagian dan pengurangan) On setting Menuju halaman login admin On next Menampilkan halaman selanjutnya On prev Menampilkan halaman sebelumnya On menu_perkalian Menampilkan tabel perkalian On menu_penjumlahan Menampilkan tabel penjumlahan On menu_pengurangan Menampilkan tabel pengurangan On menu_pembagian Menampilkan tabel pembagian On kembali Kembali kehalaman awal atau sebelumnya On
Dari Tabel 1. diatas seluruh button pada web yang telah dirancang semuanya berstatus Aktif(On).

## 4. KESIMPULAN
Dari data yang didapatkan, TK Kali Bening masih melakukan pembelajaran secara manual dikarenakan kurangnya penerapan sistem informasi di TK Kali Bening. Perancangan web yang telah selesai dibuat tidak dapat diterapkan di TK Kali Bening, dikarenakan  minimnya  biaya  serta  fasilitas  yang  tidak  mendukung  menggunakan  pembelajaran  berbasis  web.  Dari  hal tersebut, TK Kali Bening masih menggunakan pembelajaran secara manual hingga biaya dan fasilitas dapat terpenuhi serta mendukung pembelajaran berbasis web.

## REFERENCES
[1]  A. Farikhah, A. Mar’atin, L. N. Afifah, and R. A. Safitri, “Meningkatkan Kreativitas Anakusia Dinimelalui Metode Pembelajaran Loose  Part,”  Golden  Age:  Jurnal  Ilmiah  Tumbuh  Kembang  Anak  Usia  Dini,  vol.  3,  no.  1,  pp.  61–73,  Apr.  2022,  doi: 10.14421/jga.2018.31-05.
[2]  D. Abdullah, E. Erlina, C. I. Erliana, D. Irwansyah, M. Zarlis, and E. Elviwani, “Aplikasi Pembelajaran Rambu-Rambu Lalu Lintas Menggunakan Metode Finite State Machine (Fsm) Berbasis Web,” TECHSI - Jurnal Teknik Informatika, vol. 10, no. 2, p. 89, Oct. 2018, doi: 10.29103/techsi.v10i2.841.
[3]  S. Aisa, N. Aini, and I. Djafar, “Penerapan Teknologi Progressive Web Apps pada Aplikasi Pembelajaran Al-Qur’an Metode Dirosa,” Jurnal  CoSciTech  (Computer  Science  and  Information  Technology),  vol.  3,  no.  2,  pp.  66–72,  Aug.  2022,  doi: 10.37859/coscitech.v3i2.3930.
[4]  B. Trisakti and F. I. Pratama, “Perancangan Aplikasi Penjualan Berbasis Web Pada CV.Jawi,” Informatika Dan RPL, vol. 2, no. 1, pp. 57–61, Mar. 2020.
[5]  A. Syafrizal, R. Andika, and A. P. Panggabean, “Perancangan Game Pembelajaran Anak Usia Dini Menggunakan HTML 5 Berbasis Multimedia Interaktif,” 2018.
[6]  N.  A.  Suryandaru  and  E.  W.  Setyaningtyas,  “Pengembangan  Media  Pembelajaran  Berbasis  Website  Pada  Muatan  Pembelajaran Matematika Kelas IV,” Jurnal Basicedu, vol. 5, no. 6, pp. 6040–6048, Nov. 2021, doi: 10.31004/basicedu.v5i6.1803.
[7]  A. K. Rahmatika, F. Pradana, and F. A. Bachtiar, “Pengembangan Sistem Pembelajaran HTML dan CSS dengan Konsep Gamification berbasis Web,” Jurnal Pengembangan Teknologi dan Ilmu Komputer, vol. 4, no. 8, pp. 2655–2663, Aug. 2020, [Online]. Available: http://j-ptiik.ub.ac.id
[8]  S. T. Wahyudi, Pemrograman Web : HTML DAN CSS, vol. 1. 2022.
[9]  U. Rio, D. Haryono, W. Agustin, and S. Imardi, “Hybrid Application Mobile Commerce Resto Delivery Menggunakan Metode Agile Developmet,”  Jurnal  CoSciTech  (Computer  Science  and  Information  Technology),  vol.  3,  no.  3,  pp.  518–525,  Dec.  2023,  doi: 10.37859/coscitech.v3i3.4498.
[10] F. N. Agung, I. Junaedi, and A. B. Yulianto, “Perancangan Sistem Informasi Pelayanan Customer Dengan Platform Web,”  Jurnal Manajamen Informatika Jayakarta, vol. 2, no. 4, p. 320, Sep. 2022, doi: 10.52362/jmijayakarta.v2i4.916.
[11] D. S. A. Siregar and M. Ula, “Sistem Informasi Pendataan Hasil Perikanandi Kota Lhokseumawe Berbasis Website,” Jurnal Ilmiah Sistem Informasi (SISFO), vol. 6, no. 2, pp. 24–31, 2022.
[12] M. K. Suendri, Buku Ajar Pemrograman Berbasis Web. Media Sains Indonesia, 2021. Accessed: Feb. 04, 2023. [Online]. Available: https://books.google.co.id/books/about/Buku_Ajar_Pemrograman_Berbasis_Web.html?id=LwhOEAAAQBAJ&redir_esc=y
[13] C Rizal, “Perancangan Server Kantor Desa Tomuan Holbung Berbasis Client Server,” Bulletin of Information Technology (BIT), p.27- 33, 2022.
[14] S. Supiyandi, M. Zen, C. Rizal, and M. Eka, “Perancangan Sistem Informasi Desa Tomuan Holbung Menggunakan Metode Waterfall,” JURIKOM (Jurnal Ris. Komputer), vol. 9, no. 2, pp. 274–280, 2022
[15] Mamase,  S.  (2016). Rancang  Bangun  Sistem Informasi   Surat   Perintah   Perjalanan   Dinas. 6(2), 7–11.