## khazanah
informatika

## Jurnal Ilmu Komputer dan Informatika

## Rancang Bangun Website dan E-Learning di  TPQ Al-Fadhillah
Risti Ana Diah 1* , Umi Fadlillah 2 1 Program Studi Informatika Universitas Muhammadiyah Surakarta Surakarta *rhieztyand@gmail.com 2 Program Studi Teknik Elektro Universitas Muhammadiyah Surakarta Surakarta umi.fadlilah@ums.ac.id

## Abstrak
Taman Pendidikan Al-Qur’an (TPQ) merupakan tempat pendidikan informal yang mengajarkan nilai-nilai agama Islam yang bertumpu pada Al-Qur’an dan Al Hadits sebagai pembelajaran yang utama, serta membimbing santri menjadi muslim yang taat beragama. Salah satu TPQ yang ada di Kartasura yaitu TPQ Al-Fadhillah, merupakan salah satu TPQ yang membutuhkan website sekaligus e-learning. Website TPQ Al-Fadhillah diharapkan bisa memudahkan dalam berkomunikasi serta mencari dan mendapat informasi. Sedangkan e-learning sebagai solusi untuk memberikan suasana pembelajaran yang berbeda dan menarik serta proses belajar mengajar menjadi lebih mudah diikuti karena ada pembelajaran materinya. Hal ini dilakukan untuk memberikan cara belajar baru dan mengenal teknologi kepada santri khususnya di TPQ Al-Fadhillah. Rancang bangun website sederhana dilengkapi dengan PHP dan MySQL, Microsoft Windows 7, Macromedia Dreamweaver, Mozilla Firefox untuk menampilkan hasil sistemnya, serta Macromedia Flash untuk membuat tampilan e-learning menjadi lebih menarik. Adanya situs website dan e-learning pada TPQ Al-Fadhillah diharapkan dapat membantu dan memudahkan pengurus dalam mengelola TPQ Al-Fadhillah, baik dari data pengajar, santri, jadwal pelajaran, dan materi pelajarannya serta e-learning yang dapat membantu proses belajar mengajarnya.
Kata kunci: E-Learning, Macromedia Dreamweaver, Macromedia Flash, Mozilla Firefox, MySQL, PHP, Website

## 1.  PENDAHULUAN
Taman Pendidikan Al-Qur’an (TPQ) merupakan tempat pendidikan informal yang mengajarkan nilai-nilai agama Islam yang bertumpu pada Al-Qur’an dan Al Hadits sebagai pembelajaran yang utama, serta membimbing santri menjadi muslim yang taat beragama[1]. Guru-guru atau ustadz dan ustadzah TPQ mengajarkan tentang materi-materi agama Islam seperti do’a harian, sejarah Islam,  dan membimbing santri menjadi muslim yang taat beragama.
Salah satu TPQ yang ada di Kartasura ialah TPQ Al- Fadhillah, merupakan salah satu TPQ yang membutuhkan website sekaligus e-learning . Kegunaan website pada TPQ Al- Fadhillah yaitu agar mudah dalam berkomunikasi serta mencari dan mendapat informasi. Sedangkan e-learning sebagai solusi untuk  memberikan suasana pembelajaran yang berbeda dan menarik dan proses belajar mengajar agar lebih mudah dalam menyampaikan materi-materi, seperti iqro’, do’a-do’a harian, dan sejarah Islam.
Hal ini dilakukan untuk memberikan cara belajar baru dan mengenal teknologi kepada santri khususnya di TPQ Al-Fadhillah, apalagi dengan cara pengaksesan multiuser serta bisa menggunakan desktop/laptop maupun mobile phone . Melalui website dapat membantu mengatasi kelemahan dalam mengelola TPQ Al-Fadhillah. Rancang bangun website sederhana dilengkapi dengan PHP dan MySQL, Microsoft Windows 7, Macromedia Dreamweaver, Mozilla Firefox untuk  menampilkan hasil sistemnya, serta HTML 4 untuk membuat tampilan menjad imenarik. Adanya situs website dan e-learning di TPQ Al- Fadhillah diharapkan dapat membantu dan memudahkan pengurus dalam mengelola TPQ Al-Fadhillah, baik dari data pengajar, santri, jadwal pelajaran, dan materi pelajarannya serta e-learning yang dapat membantu proses belajar mengajarnya.
Menurut Maulana Ilmar[2] dalam skripsinya yang berjudul “Analisis dan Perancangan Sistem Informasi Berbasis Website pada SMA Negeri 1 Pemalang”, menyatakan bahwa website merupakan halaman yang akan
digunakan pada tampilan informasi, gerak pada gambar, video maupun gabungan dari keseluruhan tersebut untuk sifat yang tetap (statis) dan uga yang berubah- ubah (dinamis) dan kan membentuk suatu rangkaian yang saling terkait, dan dihubungkan menggunakan link. Pada desain website nya menggunakan beberapa sofware aplikasi (perangkat lunak) seperti bahasa pemrograman PHP dan HTML ( Hypertext Markup Language ), MYSQL yang digunakan untuk mengakses database server. Apache yang merupakan sebuah web server lokal, Macromedia Dreamweaver MX untuk desain, pemrograman dan manajemen situs web, Adobe Photoshop 7.0 dan SwissMax untuk pengolahan gambar dan animasi serta browser yaitu Internet Explorer.
Menurut Marlina Kusuma Putri[3] dalam skripsinya yang berjudul “Implementasi E-Learning pada SMA Negeri 2 Surakarta Menggunakan PHP dan MYSQL” mengatakan bahwa e-learning merupakan revolusi yang berbasiskan pada teknologi internet dan bergelut di bidang pendidikan education). E-learning dapat dipakai agar dapat efeti pada seluruh proses pembelajaran. Metode waterfall adalah metode yang diterapkan dalam penelitian ini. Tahap yang pertama menganalisa kebutuhan apa saja yang diperlukan di SMA Negeri 2 Surakarta, kemudian perancangan sistem, kemudian pembuatan masuk ke loading, dilanjutkan dengan pengujian sistem, dan terakhir perawatan sistem. Hasil penelitian berupa sistem yang dapat digunakan pada pembelajaran yang tidak langsung bertatap muka yang biasa disebut pembelajaran jarak jauh. Dan sistem sistem tersebut telah diterapkan di SMA Negeri 2 Surakarta. Sistem e-learning tersebut digunakan agar mempermudah dalam pengksesanpada sarana pedidikan. Sistem e-learning di SMA Negeri 2 Surakarta ini sudah berhasil diterapkan, terbukti dengan guru bisa menambahkan soal, meng upload materi, memberi pengumuman berdasarkan mata pelajaran yang diampu. Siswa bisa dengan mudah mendapatkan informasi, siswa juga bisa mengerjakan kuis, sesuai dengan kelas dan jurusannya, dan juga bisa men download materi. Pengunjung biasa atau user public bisa dengan gratis mendownload materi yang tersedia di web e-learning SMA Negeri 2 Surakarta. Eko Handoyo[4] dalam skripsinya melaporkan pembuatan Aplikasi Sistem Informasi Rumah Sakit Berbasis Web pada Sub-Sistem Farmasi Menggunakan Framework Prado. Pada skripsi ini penulis mempunyai tujuan yaitu menginformasikan model dari sistem menggunakan web. Menggunakan aplikasi tersebut, user dapat mempermudah dalam mendapatkan pelayanan dan informasi-informasi kegiatan yang sudah ada, tentunya pada manajemen farmasi di rumah sakit baik posisi maupun waktu ketika mereka berada selama ada jangkauan dari internet. Sistem tersebut berbasis web dengan framework prado. Dengan pembuatan sistem tersebut sesuai pada kebutuhan rumah sakit. Pada tahap awalnya dengan melakukan analisis kebutuhan sistem yang digunakan untuk penyediaan informasi. Sistem tersebut bisa dimanaatkan untuk penyedia layanan dan juga informasi untuk user. User kan mendapat informasi- inormasi yang tepat dan akurat. Sistem tersebut bisa menjadi lebih baik pabila mempunyai keamanan data yang tinggi.

## 2.  METODE

## 2.1  WAKTU DAN TEMPAT PENELITIAN
Penelitan ini dilaksanakan mulai bulan September sampai Desember 2014 yang bertempat di TPQ Al- Fadhillah, Gang Salak 6, Karang Tengah, Ngadirejo, Kartasura, Sukoharjo.

## 2.2  PERALATAN UTAMA DAN PENDUKUNG
Penelitian ini menggunakan peralatan utama dan juga peralatan pendukung pada saat perancangan sistem. Peralatan yang digunakan ketika merancang dan membangun sistem  adalah:
1)  Perangkat Lunak Perangkat lunak yang digunakan untuk aplikasi Web Server adalah Xampp. Web Browser Mozilla Firefox digunakan untuk menampilkan hasil sistem. Editor Web menggunakan Macromedia Dreamweaver. Sistem Operasi yang digunakan adalah Microsoft Windows 7.
2)  Perangkat Keras Perangkat kerasnya ialah laptop Acer Aspire 4739 dengan Prosesor intercore 3-380 M, Harddisk 320 GB, dan  RAM 2 GB

## 2.3  DATA FLOW DIAGRAM
Data Flow Diagram Level 2 dibagi menjadi 3 DFD seperti pada Gambar 1 sampai dengan 3.
Gambar 1. DFD Level 2 Proses Pengurus
perangkat lunak untuk menentukan kondisi yang terjadi untuk suatu masukan yang akan menjalankan semua kebutuhan fungsional [5] Pengujian dilakukan oleh penulis danmenjalankan sistem, kemudian melakukan penginputan data pada setiap menu. Setiap menu dilampirkan formulir pengujian apakah hasilnya baik atau tidak. Jika semua proses berhasil dijalankan dengan baik maka aplikasi siap digunakan. Hasil dari pengujian bisa dilihat pada Tabel 1. Pada Tabel 1 dapat dilihat bahwa semua proses dalam system tersebut rata-rata baik dan tidak ada kendala yang signifikan. 2)  Pengujian Eksternal Kuisioner terdiri dari 6 soal yang dibagikan kepada 18 santridan 3 guru untuk dilihat seberap apentingnya website dan e-learning di TPQ Al-Fadhilah tersebut. Berikut adalah hasil penilaiannya pada Tabel
2. Tabel 1. Analisis Sistem melalui Blackbox Gambar 2. DFD Level 2 Proses Guru
Gambar 3. DFD Level 2 Proses Siswa

## 3.  DISKUSI

## 3.1  HASIL PENGUJIAN
Tahap selanjutnya setelah menyelesaikan pembuatan sistem website dan e-learning ini yaitu proses pengujian sistem. Pengujian dilakukan dengan 4 tahap, yaitu pengujian internal, pengujian eksternal, perbandingan dengan beberapa web browser, serta perbandingan dengan web lain yang sejenis.
1)  Pengujian Internal
Pengujian internal dilakukan dengan pengujian BlackBox, yaitu pengujian tingkah laku yang lebih terfokus kepada kebutuhan fungsional dari perangkat lunak. Pengujian BlackBox memungkinkan pembuat
No Kegiatan Status Baik Cukup sedang 1 User Login  2 Data, Info, Reward, Link, dan Kontak  3 Menginputkan data guru dan santri  4 Megninputkan soal, nilai, dan kuis  5 Melihat Sejarah Islam , Tajwid, Iman dan Islam, Hafalan, Marhalah, Soal dan Materi

6 Menginputkan gambar dan keterangannya  7 Melihat informasi  8 Menjawab soal  9 Menginputkan informasi  10 User Logout 
Tabel 2. Hasil Kuesioner
3)  Pengujian dengan Web Browser
Pengujian web browser juga akan membantu dalam hal tampilan website , seperti Google Chrome,
Mozilla Firefox, dan Opera Mini.
Tabel 3. Hasil Pengujian menggunakan Web Browser
Berdasarkan dari hasil perbandingan tersebut, Google Chrome dan Mozilla Firefox mempunyai tampilan yang terlihat lebih baik daripada Opera Mini. 4)  Perbandingan dengan Web Lain
Ada kemiripan dengan web Iswan Kristiyaningsih (2011) dalam penelitiannya yang berjudul “Pembuatan Aplikasi Pembelajaran On Line ( E-Learning ) di MTs Negeri Plupuh Berbasis Web ”. Perbedaannya adalah bahwa dalam web ini ada fitur rewards untuk diperlihatkan kepada siswa/santri. Ada juga fitur “lihat nilai” setelah selesai mengerjakan kuis. Sedangkan  di  web  Iswan  tidak  ada  fitur-fitur tersebut.
Secara umum Rancang bangun website dan e-learning ini memiliki beberapa kelebihan dan kelemahan apabila dibandingkan dengan penelitian Iswan Kristiyaningsih[6], yaitu:
Kelebihan dari aplikasi ini adalah bahwa secara umum mudah digunakan. Aplikasi ini memudahkan pengurus dalam mengelola TPQ Al-Fadhillah dan bisa membantu guru dalam mengajar siswa/santri. Aplikasi ini bisa mendukung siswa/santri dalam belajar mandiri.
Sedangkan Kelemahan dari aplikasi ini adalah
dalam hal desain kurang bagus. Pengurus, guru, dan siswa/santri harus login pada halaman yang sama. Kendala dalam implementasi aplikasi ini adalah tidak semua siswa/santri punya komputer yang terhubung dengan jaringan internet.

## 4.  KESIMPULAN
Pada hasil rancang website dan e-learning di TPQ Al- Fadhillah ini dapat disimpulkan bahwa sistem informasi ini dapat mengembangkan dan membangun sistem informasi pembelajaran secara online di TPQ Al-Fadhillah. Dapat memberikan sarana atau fasilitas kepada pengajar agar  lebih mudah dalam menyampaikan materi pelajaran. Dapat memberikan metode pembelajaran yang cepat dan praktis serta dapat diakses darimana saja selama dalam jangkauan jaringan internet. Dapat membantu pengurus dalam mengelola aktivitas TPQ Al-Fadhillah.

## DAFTAR PUSTAKA
[1] Gunawan, Ary, “Pengertian TPQ/TPA”, Tersedia dalam :<http://edukasi.kompasiana. com/2011/06/11/pendidikan-karakter-berbasis- taman-pendidikan-al-quran-tpatpq-372275.html> [diakses tanggal 18 September 2014]
[2] Maulana, Ilmar, “Analisis dan Perancangan Sistem Informasi Berbasis WebsitepadaSMA Negeri 1 Pemalang”, Skripsi Sekolah Tinggi Manajemen InformatikadanKomputer Yogyakarta, Yogyakarta, 2008
[3] Putri, Marlina Kusuma, “Implementasi E-Learning pada SMA Negeri 2 Surakarta Menggunakan PHP dan MYSQL”, Skripsi Universitas MuhammadiyahSurakarta, Surakarta, 2011.
[4] Handoyo, Eko, “Aplikasi Sistem Informasi Rumah Sakit Berbasis Webpada Sub SistemFarmasiMenggunakan Framework Prado”., Skripsi Universitas Diponegoro, Semarang, 2008
[5] Pressman R. S., “Rekayasa Perangkat Lunak Pendekatan Praktisi”, McGrawHill,  Andi Ofset, Yogyakarta, 2005
[6] Kristiyaningsih, Iswan, “Pembuatan Aplikasi Pembelajaran On-Line (E-Learning) di MTs Negeri Plupuh Brbasis Web”. Skripsi Universitas Muhammadiyah Surakarta, Surakarta, 2011 No Variabel yang Dinilai Jawaban A B C 1 Tampilan Sistem Menarik Sangat Cukup Kurang Jumlah Jawaban 11 10 0 2 Bisa Mengoperasikan Sangat Cukup Kurang Jumlah Jawaban 7 9 5 3 Dapat Membantu Sangat Cukup Kurang Jumlah Jawaban 8 13 0 4 Fitur Lengkap Sangat Cukup Kurang 8 12 1 5 Memudahkan Bertukar Informasi Sangat Cukup Kurang Jumlah Jawaban 14 6 1 6 Pengaksesan Cepat Sangat Cukup Kurang Jumlah Jawaban 6 15 0 No Web Browser Tampilan Kecepatan 1 Google Chrome Baik Baik 2 Mozilla Firefox Baik Baik 3 Opera Mini Cukup Kurang