## pISSN: 2442-3386  eISSN: 2442-4293
Vol 7 No 2 Jul – Des 2021, 75 - 80

## RANCANG BANGUN SISTEM BUKU TABUNGAN BERBASIS WEBSITE DI SDIT ALMANAR LAMONGAN
Arif Nur Rizaluddin 1 , Catenary Febriyanto 2 , Tjatursari Widiartin 3 1,2,3 Program Studi Informatika-Universitas Wijaya Kusuma Surabaya, widiartin@uwks.ac.id

## Abstrak
SDIT Al Manar adalah sebuah sekolah dasar yang mendidik siswanya untuk menabung. Dalam aktifitas menabung terkadang guru yang menangani administrasi penerimaan dan pengeluaran dana tabungan mengalami kendala yaitu Seringnya  terjadi  selisih  angka  dan  tidak  tercatatnya  transaksi.  Aplikasi  Buku  Tabungan  Berbasis  Web  dapat membantu mempermudah petugas administrasi sekolah dalam menangani data transaksi tabungan siswa, sehingga pelaksanaan  transaksi  menabung  dapat  dilakukan  dengan  cepat,  tepat,  dan  akurat.  Aplikasi  buku  tabungan  ini dibangun dengan  menggunakan  pendekatan  siklus hidup pengembangan  sistem  dimana  terdapat 5  tahapan yaitu identifikasi  masalah,  analisa  kebutuhan,  desain  sistem,  pengkodean,  dan  pengujian.  Teknik  Analisa  dan  desain sistem  yang  digunakan  berbasis  objek  oriented  dan  digambarkan  menggunakan  case  tool  unified  modelling language  (UML).  Tahapan  pertama,  identifikasi  masalah  dilakukan  di  lokasi  kerja  praktek  dengan  metode pengumpulan data observasi dan wawancara. Tahapan kedua, analisa sistem dilakukan untuk mencari kebutuhan fungsional dan non-fungsional yang digambarkan dengan use case diagram. Tahapan ketiga,  desain sistem yang akan digambarkan dengan class diagram. Tahapan keempat, pengkodean dilakukan dengan menggunakan Bahasa pemrograman PHP dan database engine MySQL. Tahapan kelima, dilakukan pengujian terhadap aplikasi.
Kata Kunci: UML , Tabungan, Aplikasi Web, PHP, MySQL

## Abstract
SDIT Al Manar is an elementary school that educates its students to save money. In the activity of saving money, sometimes teachers who handle the administration of receiving and disbursing savings funds experience problems, namely frequent discrepancies in numbers and unrecorded transactions. The Web-Based Savings Book application can help make it easier for school administration officers to handle student savings transaction data, so that the implementation  of  money-saving  transactions  can  be  done  quickly,  precisely,  and  accurately.  This  passbook application  is  built  using  a  system  development  life  cycle  approach  where  there  are  5  stages,  namely  problem identification, requirements analysis, system design, coding, and testing. The analysis technique and system design used  is  object-oriented  and  described  using  the  case  tool  of  the  unified  modeling  language.  The  first  stage, identification  of  problems  is  carried  out  at  the  practical  work  location  with  observation  and  interview  data collection  methods.  The  second  stage,  system  analysis  is  carried  out  to  find  functional  and  non-functional requirements which are described by use case diagrams. The third stage is the system design which will be described with  a  class  diagram.  The  fourth  stage,  coding  is  done  using  the  PHP  programming  language  and  the  MySQL database engine. The fifth stage is testing the application. Keywords: UML, Savings, Web Application, PHP, MySQL

## I. PENDAHULUAN
Seiring majunya zaman, perkembangan teknologi pun semakin pesat. Perkembangan teknologi komputer juga telah  banyak  membantu  perkerjaan  manusia[1]. Perkembangan teknologi komputer juga telah merambat  kedalam  dunia  pendidikan[2],  hampir seluruh sarana pendidikan, instansi pemerintahan serta dalam  segala  aspek  kehidupan  dalam  masyarakat. Terutama  dalam  aspek  pendidikan,  perkembangan teknologi  komputer  telah  merambat  kedalamnya, hampir seluruh sekolah telah memiliki teknologi yang canggih  guna  menunjang  kemajuan  dan  peningkatan dalam lingkup sekolah tersebut[3]. Hal ini juga terkait dalam  teknologi  yang  canggih  dalam  bentuk pengolahan data sekolah, baik dalam pengolahan data
siswa, data pegawai maupun pengkajian dalam bentuk keuangan sekolah[4].
SDIT  AL  MANAR  merupakan  pendidikan  anak  usia dini  di  kabupaten  lamongan.  Selain  penyelenggaraan pendidikan,  SDIT  AL  MANAR  juga  mengadakan program-program lainnya yang sangat bermanfaat baik bagi  kelangsungan  sekolah,  prestasi  siswa  maupun keuangan siswa, salah satunya adalah tabungan siswa. Proses  penyetoran  tabungan  siswa  saat  ini  masih menggunakan system manual.  Ketika  siswa  ingin menabung,  mereka  menyerahkan  buku  tabungan  dan uang  kepada  koperasi.  Kemudian  dilanjutkan  ke bendahara  tabungan  untuk  di  tulis  di  buku  tabungan siswa  dan  di  buku  kas  pengelola  tabungan  sebagai transaksi  penyetoran.  Sistem  ini  direncanakan  akan

## Melek IT

## Information Technology Journal. Vol 7 No 2 Jul - Des 2021, 76 - 80
diimplementasikan menggunakan bahasa pemrograman PHP dan database MySQL[5]. Kemudian  dalam  membangun  sistemnya  akan dilakukan menggunakan metodologi SDLC 5 tahap[6] .
Melihat bahwa tabungan ini cukup penting untuk para siswa  atau  siswi  dan  untuk  kemajuan  teknologi  di sekolah, ada baiknya tabungan tersebut memiliki sistem sendiri yang berbasi web agar para siswa pun bisa ikut ambil  bagian  dalam  sistem  tabungan  tersebut.  Serta tidak terbatas hanya menabung satu bulan sekali tetapi juga kapan pun para siswa ingin menabung.

## II. METODE
Pembuatan  aplikasi  buku  tabungan  ini  dilakukan  5 tahap.  Dimana  masing-masing  tahap  akan  dijelaskan secara rinci.

## 2.1 Tahap Identifikasi Masalah
Pada  tahap  ini  dilakukan  proses  pengumpulan  data dengan  metode  wawancara  dan  observasi  untuk melakukan pengamatan dan analisa terhadap system E- Tabungan  yang  sedang  berjalan  pada  SDIT  AL MANAR  Lamongan  sehingga  mendapatkan  data  dan informasi  yang  dibutuhkan  oleh  peneliti.  Observasi langsung  dilakukan  di  SDIT  AL  MANAR  Lamongan pada  tanggal  24  februari  2021.  Tujuan  dilakukannya observasinya  adalah  untuk  mengetahui  bagaimana sistem  transaksi  tabungan  yang  ada  pada  SDIT  AL MANAR.

## 2.2 Analisa Sistem
Pada  tahapan  analisa  sistem,  dilakukan  analisa kebutuhan  sistem  antara  lain  kebutuhan  input, kebutuhan  proses,  dan  kebutuhan  output  dari  sistem. Selain itu dilakukan pula analisa kebutuhan data untuk basis data yang akan diperlukan sistem.
Teknik  analisa  sistem  yang  digunakan  adalah berorientasi  obyek[7],  oleh  sebab  itu,  hasil  analisa sistem  digambarkan  dengan  use  case  diagram  dan acivity  diagram.  Pada  gambar  1  ditunjukkan  use  case diagram sistem. Use case diagram adalah satu unit dari beberapa  pekerjaan  yang  berguna  yang  melibatkan pengguna  (disebut  aktor)  dan  sistem.  Fungsi  use  case adalah  untuk  menunjukkan  interaksi  yang  terlibat dalam use case[8].
Gambar 1. Use case diagram Sistem Tabungan Pada  gambar  1  sampai  dengan  gambar  5, ditunjukkan  activity  diagram  untuk  sistem  tabungan, dimana  fungsi  activity  diagram  adalah  membantu dalam  menentukan  apakah  ruang  lingkup  kebutuhan sistem  sudah  proyek  lengkap  dan  konsisten  dengan tujuan organisasi[9].
Pada gambar 2 ditunjukkan activity diagram untuk login ke sistem.
Gambar 2. Activity diagram login ke sistem
Pada  gambar  3,  ditunjukkan  activity  diagram  untuk Kelola data siswa.
Gambar 3. Activity diagram kelola data siswa
Pada  gambar  4,  ditunjukkan  activity  diagram  untuk Kelola data tabungan.
Gambar 4. Activity diagram kelola data tabungan Pada  gambar  5,  ditunjukkan  activity  diagram  untuk Kelola laporan.

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 7 No 2 Jul – Des 2021, 77 - 80

## Gambar 5. Activity diagram kelola laporan

## 2.3 Desain Sistem
Pada tahap desain sistem akan dilakukan desain untuk antar  muka  sistem,  algoritma  dari  proses,  dan  desain basis data.

## 2.3.1 Desain Antar Muka Sistem
Membuat  antar  muka  yang  user  friendly sangatlah  penting,  agar  perangkat  lunak  yang  dibuat mudah  digunakan[10].  Pada  gambar  6,  ditunjukkan desain antar muka untuk halaman utama dari sistem.
Gambar 6. Desain halaman utama sistem
Pada  gambar  6,  ditunjukkan  desain  antar  muka  untuk melakukan administrasi transaksi tabungan.

## Gambar 7. Desain adminstrasi tabungan

## 2.3.2 Desain Proses
Di  dalam  pemrograman  berorientasi  obyek,  prosedur dan  fungsi  yang  digunakan  dienkapsulasi  didalam sebuah  class[11].  Oleh  sebab  itu,  didalam  Teknik berorientasi  obyek,  desain  proses  dapat  digambarkan dengan class diagram[12]. Pada gambar 8, ditunjukkan class diagram untuk sistem.

## Gambar 8. Class diagram

## 2.3.3 Desain Basis Data
Sebuah sistem atau aplikasi yang membutuhkan banyak jenis dan tipe data, maka perlu dikelola menjadi sebuah basis data agar dapat diakses dengan mudah, cepat, dan tepat[13].  Desain  basis  dilakukan  dengan  melakukan pemodelan  data  terlebih  dahulu  dan  digambarkan dengan  Entity  Relationship  Diagram  (ER  Diagram). Keuntungan  penggunaan  model  data  relasi  adalah memudahkan  maintain  sistem[14][15].  Selain  itu,  ER diagram  memudahkan  proses  desain  data  karena langsung  mencerminkan  kebutuhan  data[16][17]. Tahap  selanjutnya  adalah  dilakukan  transformasi  dari bentuk ER Diagram menjadi bentuk ER Schema[18][19].  Pada  gambar  9,  ditunjukkan  ER Diagram dari sistem.
Gambar 9. Entity relationship diagram
Pada  gambar  10,  ditunjukkan  hasil  transformasi  ER Diagram  ke  bentuk  Entity  Relationship  Schema  (ER Schema).

## Melek IT

## Information Technology Journal. Vol 7 No 2 Jul - Des 2021, 78 - 80

## 2.4 Membangun Sistem
Setelah  desain  sistem  telah  selesai  dilakukan,  maka tahapan  selanjutnya  adalah  membangun  sistem. Didalam  membangun  sistem  ada  2  pekerjaan  yang dilakukan,  yaitu  melakukan  koding  dan  kedua membagun basis data[6]. Karena Sistem tabungan yang akan  dibangun  berbasis  web[20],  maka  Bahasa pemrograman  yang  akan  digunakan  adalah  Bahasa pemrograman  PHP[21].  Untuk  database  engine  yang digunakan adalah menggunakan MySQL[5].

## III. HASIL DAN PEMBAHASAN
Berikut  akan  dijelaskan  hasil  yang  telah  diperoleh didalam penelitian membangun Sistem tabungan. Pada gambar  10  ditunjukkan  tampilan  contoh  seorang petugas  adminstrasi  memasukkan  data  setoran tabungan dari siswa berdasarkan buku tabungan yang dimiliki siswa.
Gambar 10. Transaksi setoran
Pada gambar 11, ditunjukkan  tampilan total transaksi setoran dan transaksi tarikan yang dilakukan perhari.
Gambar 11. Informasi total setoran dan tarikan
Pada  gambar  11,  ditunjukkan  laporan  hasil  cetak transaksi setoran dan transaksi tarikan tabungan.
Gambar 12. Laporan hasil cetak transaksi

## IV. PENUTUP

## 4.1. Kesimpulan
Dari  beberapa  uji  coba  yang  telah  dilakukan  didalam penelitian,  maka  dapat  diambil  beberapa  kesimpulan yaitu:
1. Bahasa  pemrograman  PHP  dapat  digunakan untuk membangun sistem berbasis website.
2. Database  engine  MySQL  dapat  digunakan Bersama-sama  dengan  Bahasa  pemrograman PHP  untuk  membangun  sistem  berbasis website.
3. Sistem tabungan dapat menampilkan informasi  transaksi  setoran  dan  tarikan  yang dapat memudahkan guru memantau tabungan seluruh siswa.

## 4.2. Saran
Dari sistem yang telah dibangun, maka beberapa saran diberikan  untuk  meningkatkan  kualitas  sistem,  antara lain:
1. Sistem  tabungan  dapat  ditambahkan  fitur untuk siswa agar selalu dapat memantau saldo tabungannya.
2. Sistem  tabungan  dapat  memberi  alert  untuk siswa yang tidak menabung.

## DAFTAR PUSTAKA
[1]  H.  Noori  Hussain  Al-Hashimy  and  N.  Yusof, “The  relationship  between  the  computerized accounting information system and the performance  of  contracting  companies,” Mater. Today Proc. , p. S2214785321024780, Apr. 2021, doi: 10.1016/j.matpr.2021.03.426.
[2]  K. Iterbeke, W. Schelfhout, and K. De Witte, “The role  of  students’  interests  during  computer- assisted  learning:  A  field  experiment,” Comput. Hum. Behav. , vol. 130, p. 107168, May 2022, doi:
10.1016/j.chb.2021.107168.
[3]  M.  Sailer,  J.  Murböck,  and  F.  Fischer,  “Digital learning  in  schools:  What  does  it  take  beyond digital  technology?,” Teach.  Teach.  Educ. ,  vol. 103,
p. 103346, Jul. 2021, doi: 10.1016/j.tate.2021.103346.
[4]  E.  Zibetti,  A.  Chevalier,  and  R.  Eyraud,  “What type  of  information  displayed  on  digital scheduling software facilitates reflective planning tasks for students? Contributions to the design of a  school  task  management  tool,” Comput.  Hum. Behav. ,  vol.  28,  no.  2,  pp.  591–607,  Mar.  2012, doi: 10.1016/j.chb.2011.11.005.
[5]  R.  Nixon, Learning  PHP,  MySQL,  JavaScript, CSS  &  HTML5 ,  Third  edition.  Beijing ; Sebastopol, CA: O’Reilly Media, Inc, 2014.
[6]  Kenneth E. Kendall and Julie E. Kendall, System Analysis And Design , 9th ed. Pearson, 2008.
[7]  G.  Jakus,  M.  Jekovec,  and  S.  Tomaži,  “New technologies for web development,” p. 9.

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 7 No 2 Jul – Des 2021, 79 - 80
[8]  B.  Dathan  and  S.  Ramnath, Object-Oriented Analysis,  Design  and  Implementation .  Cham: Springer  International  Publishing,  2015.  doi: 10.1007/978-3-319-24280-4.
[9] Object-Oriented  Analysis  and  Design  for Information  Systems .  Elsevier,  2014.  doi: 10.1016/C2012-0-06942-6.
[10] S. Karunaratne and D. Dharmarathna, “A review of  comprehensiveness,  user-friendliness,  and contribution  for  sustainable  design  of  whole building  environmental  life  cycle  assessment software  tools,” Build.  Environ. ,  vol.  212,  p. 108784, Mar. 2022,
doi:
10.1016/j.buildenv.2022.108784.
[11] Stephen  Wong  and  Dung  Nguyen, Principles  of Object-Oriented  Programming .  Hongkong:  The Open University Of Hongkong, 2020.
[12] G. Booch, R. A. Maksimchuk, M. W. Engle, B. J. Young, J. Connallen, and K. A. Houston, Object- oriented  analysis  and  design  with  applications, third  edition ,  vol.  33.  2008.  Accessed:  Feb.  09, 2022. [Online]. Available: https://dl.acm.org/doi/10.1145/1402521.1413138
[13] R.  Elmasri  and  S.  Navathe, Fundamentals  of database systems , Seventh edition. Hoboken, NJ: Pearson, 2016.
[14] K. Takahashi and E. Liang, “Analysis and design of  Web-based  information  systems,” Comput. Netw.  ISDN  Syst. ,  vol.  29,  no.  8–13,  pp.  1167– 1180, Sep. 1997, doi: 10.1016/S0169- 7552(97)00040-8.
[15] M.  Genero,  G.  Poels,  and  M.  Piattini,  “Defining and  validating  metrics  for  assessing  the understandability of entity–relationship
diagrams,” Data Knowl. Eng. , vol. 64, no. 3, pp.
534–557, Mar. 2008, doi: 10.1016/j.datak.2007.09.011.
[16] N.  E.  Cagiltay,  G.  Tokdemir,  O.  Kilic,  and  D. Topalli,  “Performing  and  analyzing  non-formal inspections  of  entity  relationship  diagram (ERD),” J. Syst. Softw. , vol. 86, no. 8, pp. 2184– 2195, Aug. 2013, doi: 10.1016/j.jss.2013.03.106.
[17] L.  Wang,  M.  Jia,  C.  Peng,  S.  Ni,  and  S.  Shen, “Scenario-Entity  Analysis  based  on  an  entity- relationship model: Revisiting crime reconstruction,” Forensic  Sci.  Int. ,  vol.  302,  p. 109923, Sep. 2019, doi:
10.1016/j.forsciint.2019.109923.
[18] T. Widiartin and E. Noerhartati, “Build sorghum database  for  developing  SEU  digital  network  on sorghum  website  of  Wijaya  Kusuma  Surabaya University,” IOP Conf. Ser. Mater. Sci. Eng. , vol. 434,  p.  012253,  Dec.  2018,  doi:  10.1088/1757- 899X/434/1/012253.
[19] S.  Jajodia  and  P.  A.  Ng,  “Translation  of  entity- relationship  diagrams  into  relational  structures,” J. Syst. Softw. , vol. 4, no. 2–3, pp. 123–133, Jul. 1984, doi: 10.1016/0164-1212(84)90003-7.
[20] J.  Niederst  Robbins, Learning  Web  design:  a beginner’s guide to HTML, CSS, JavaScript, and web  graphics ,  Fourth  edition.  Beijing:  O’Reilly, 2012.
[21] T. Widiartin and E. Noerhartati, “MEMBANGUN WEBSITE  SORGUM  SEBAGAI  SARANA PROMOSI PUSAT PENELITIAN DAN PENGEMBANGAN SORGUM DI UNIVERSITAS WIJAYA KUSUMA SURABAYA,” Simetris  J.  Tek.  Mesin  Elektro Dan  Ilmu  Komput. ,  vol.  8,  no.  2,  p.  477,  Nov. 2017, doi: 10.24176/simet.v8i2.1318.

## Melek IT