xvii
DAFTAR SIMBOL
1. Flow Map
Simbol Nama
Keterangan
Proses Merupakan proses computer
yang terjadi didalam aliran dokumen
Aliran Menunjukkan data-data yang
mengalir pada sistem
Proses Manual Merupakan proses manual
yang terjadi didalam sistem
File Storage Merupakan penyimpanan data,
menunjukkan data yang disimpan kedalam suatu disk
harddisk
Dokumen Dokumen yang dialirkan
didalam flow map
Offline Storage Arsip
Menunjukan tempat penyimpanan data berupa
arsip
2. Data Flow Diagram DFD
No Simbol
Keterangan
1.
Proses menunjukan transformasi dari
masukan menjadi keluaran
2.
Entitas eksternal dimana entitas
tersebut berkomunikasi dengan sistem
3.
Penyimpanan menunjukan
penyimpanan dalam sebuah database
4.
Aliran menggambarkan aliran data
yang masuk ke proses atau keluar dari suatu proses
3. Entity Relationship Diagram ERD
No Simbol
Keterangan
1.
Data Entitas segala sesuatu yang
nyata ataupun abstrak yang datanya akan diolah
2.
Relasi menunjukan adanya hubungan
antara sejumlah entitas yang berasal dari himpunan entitas berbeda
3.
Aliran Data menyatakan penghubung
antara Relasi dengan Data Entitas dan dengan atribut
4.
Atribut menunjukan field-field yang
dimiliki oleh suatu Data Entitas atau Relasi
xix
DAFTAR LAMPIRAN
Lampiran A Tampilan Antar Muka......................................................... A-1 Lampiran B Listing Program .................................................................. B-1
Lampiran C Hasil Kuesioner ................................................................... C-1
1
BAB I PENDAHULUAN
1.1 Latar Belakang Masalah
Dalam membaca Al- Qur’an terdapat kaidah-kaidah dalam pengucapan huruf
hijaiyah hokum tajwid yang harus dimengerti dan dipahami oleh pembaca Al- Qur’an tetapi pada prakteknya sering tidak diindahkan, banyak yang hanya
sekedar membaca tanpa mengetahui hukumnya. Kendala-kendala yang dihadapi dalam proses belajar membaca Al-
Qur’an bagi pemula adalah dalam proses pengucapan huruf masih belum bisa membedakan antara pengucapan huruf satu
dengan huruf yang lain dalam huruf hijaiyah dengan lafal yang hamper sama, contoh
Qof dengan Kho’,
Dlod dengan Dho’, Dal dengan
Dzal, pada saat pengucapan panjang dan pendek huruf hijaiyah masih belum dapat membedakan antara huruf yang seharusnya dibaca panjang atau pendek.
Selain itu kendala lain dalam belajar membaca Al- Qur’an ialah sering kali harus
berhadapan dengan rasa malu, malas dan gengsi, belum lagi panjangnya waktu pengajaran dan tingkat kesulitan metode pengajaran yang sering tak teratasi oleh
sang guru, semua ini merupakan kendala yang selama ini di hadapi oleh mereka yang ingin bisa membaca Al-
Qur’an dengan baik dan benar. Untuk membatu menyelesaikan beberapa kendala yang ada, maka salah satu
solusi yang bisa diambil adalah dengan membangun suatu pembelajaran membaca Al-
qur’an yang berbasis web dengan menggunakan audio visual yang memungkinkan user dapat mengakses secara langsung serta mendapatkan
2
kemudahan dalam proses pembelajarannya. Pembangunan perangkat lunak pembelajaran ini dibuat secara dinamis yang bertujuan untuk dapat dikembangkan
kembali setiap saat sehingga memberikan kemudahan maintenance bagi administrator dalam meng-update materi dan latihan. Disisi lain memberikan
kemudahan dan kenyamanan bagi pengguna dalam mendapatkan informasi dan materi
– materi. Melihat permasalahan di atas melahirkan suatu ide untuk membuat suatu
pembelajaran membaca Al- qur’an untuk anak-anak atau orang dewasa yang baru
belajar membaca Al- qur’an yang dilakukan secara informal berbasis web yang
memungkinkan user agar dapat mengatur sendiri waktu belajar dan dapat mengakses pembelajaran secara langsung, yang kemudian diberi judul
“ WEBSITE PEMBELAJARAN TAHAP DASAR MEMBACA AL-
QUR’AN DENGAN METODE INTERACTIVE LEARNING”.
1.2 Rumusan Masalah
Berdasarkan pokok pikiran yang di uraikan di atas maka perumusan masalah yang akan dibahas pada penelitian ini adalah bagaimana membuat website
pembelajaran tahap dasar membaca al- qur’an dengan metode interactive learning.
1.3 Maksud dan Tujuan
Adapun yang menjadi maksud dari penelitian ini adalah membuat website pembelajaran tahap dasar membaca al-
qur’an dengan metode interactive learning. Sedangkan tujuan yang akan dicapai dalam penelitian ini adalah :
3
1. Membantu anak-anak atau orang dewasa yang baru belajar membaca Al- qur’an untuk bisa memahami dasar-dasar dalam membaca Al-qur’an secara
mandiri. 2. Membuat suatu media pembelajaran yang interactive bagi anak-anak atau
orang dewasa menggunakan audio visual. 3. Memberikan latihan soal sebagai umpan balik dari pembelajaran tersebut.
1.4 Batasan Masalah
Guna memaksimalkan hasil penelitian, maka diberikan batasan terhadap ruang lingkup permasalahan yang akan diteliti diantaranya :
1. Target pengguna website ini adalah anak-anak atau orang dewasa yang belum bisa membaca al-
qur’an. 2. Website ini hanya memberikan contoh pengucapan dan penulisan huruf
dalam pembelajarannya. 3. Pengguna dapat memperoleh materi tentang pengenalan huruf hijaiyah
pengenalan Mad, Qalqalah, idzhar, idgham,iqlab dan ikhfa. 4. Pengguna dapat mendengarkan pengucapan yang baik dan benar dari materi
yang telah dipilih. 5. User dapat melakukan latihan evaluasi terhadap apa yang telah di pelajari.
6. Administrator dapat menambahkan materi, menghapus materi serta mengubah materi.
7. Analisis pemodelan yang digunakan berdasarkan pemodelan terstruktur Data
Flow Diagram DFD.
4
1.5 Metodologi Penelitian
Metodologi yang digunakan dalam penulisan tugas akhir ini adalah sebagai berikut :
1. Tahap pengumpulan data Metode pengumpulan data yang digunakan dalam penelitian ini adalah
sebagai berikut : a. Studi Literatur.
Pengumpulan data dengan cara mengumpulkan literatur, jurnal, browsing internet dan bacaan-bacaan yang ada kaitannya dengan topik yang diambil
b. Interview. Teknik pengumpulan data dengan mengadakan tanya jawab secara
langsung yang ada kaitannya dengan topik yang diambil. 2. Tahap pembuatan perangkat lunak.
Teknik analisis data dalam pembuatan perangkat lunak menggunakan paradigma perangkat lunak secara waterfall seperti tercantum pada gambar 1.1,
yang meliputi beberapa proses diantaranya: a. System Information Engineering
Merupakan bagian dari sistem yang terbesar dalam pengerjaan suatu proyek, dimulai dengan menetapkan berbagai kebutuhan dari semua
elemen yang diperlukan sistem dan mengalokasikannya kedalam pembentukan perangkat lunak.
5
b. Analisis Merupakan tahap menganalisis hal-hal yang diperlukan dalam pelaksanaan
proyek pembuatan perangkat lunak. c. Design
Tahap penerjemahan dari data yang dianalisis kedalam bentuk yang mudah dimengerti oleh user.
d. Coding Tahap penerjemahan data atau pemecahan masalah yang telah dirancang
keadalam bahasa pemrograman tertentu. e. Pengujian
Merupakan tahap pengujian terhadap perangkat lunak yang dibangun. f. Maintenance
Tahap akhir dimana suatu perangkat lunak yang sudah selesai dapat mengalami perubahan
–perubahan atau penambahan sesuai dengan permintaan user.
Pengujian Implementasi
Coding Perancangan
Analisis
Gambar 1.1 Model Waterfall
6
1.6 Sistematika Penulisan
Sistematika penulisan proposal penelitian ini disusun untuk memberikan gambaran umum tentang penelitian yang dijalankan. Sistematika penulisan tugas
akhir ini adalah sebagai berikut : BAB I PENDAHULUAN
Bab ini menguraikan tentang latar belakang masalah, rumusan masalah, maksud dan tujuan, batasan masalah, metode penelitian dan sistematika penulisan.
BAB II. TINJAUAN PUSTAKA Bab ini memaparkan tentang landasan teori seperti pengertian e-learning,
pengertian basis data, perancangan sistem, pengertian internet, pengertian world wide web, pengertian http, bahasa pemograman yang digunakan, tinjauan
perangkat lunak dan sebagainya. BAB III. ANALISIS MASALAH
Bab ini memaparkan tentang analisis sistem, analisis masalah, analisis kebutuhan non fungsional, perancangan sistem, perancangan antar muka dan sebagainya.
BAB IV. PERANCANGAN DAN IMPLEMENTASI Pada bab ini diuraikan tentang lingkungan implementasi, implementasi antar
muka, pengujian perangkat lunak yang menggunakan pengujian alpha dan betha. BAB V. KESIMPULAN DAN SARAN
Berisi kesimpulan dan saran yang sudah diperoleh dari hasil penulisan tugas akhir.
7
BAB II LANDASAN TEORI
2.1 Pengertian
Internet
Internet dapat diartikan sebagai jaringan komputer luas dan besar yang mendunia, yaitu menghubungkan pemakai komputer dari suatu negara ke negara
lain di seluruh dunia, dimana di dalamnya terdapat berbagai sumber daya informasi dari mulai yang statis hingga yang dinamis dan interaktif.
2.1.1 Sejarah Internet
Sejarah internet dimulai pada 1969 ketika Departemen Pertahanan Amerika, U.S. Defense Advanced Research Projects Agency DARPA
memutuskan untuk mengadakan riset tentang bagaimana caranya menghubungkan sejumlah komputer sehingga membentuk jaringan organik. Program riset ini
dikenal dengan nama ARPANET. Pada 1970, sudah lebih dari 10 komputer yang berhasil dihubungkan satu sama lain sehingga mereka bisa saling berkomunikasi
dan membentuk sebuah jaringan. Tahun 1972, Roy Tomlinson berhasil menyempurnakan program e-mail
yang ia ciptakan setahun yang lalu untuk ARPANET. Program e-mail ini begitu mudah sehingga langsung menjadi populer. Pada tahun yang sama, icon juga
diperkenalkan sebagai lambang penting yang menunjukkan at atau pada. Tahun 1973, jaringan komputer ARPANET mulai dikembangkan ke luar Amerika
Serikat. Komputer University College di London merupakan komputer pertama yang ada di luar Amerika yang menjadi anggota jaringan Arpanet. Pada tahun
yang sama, dua orang ahli komputer yakni Vinton Cerf dan Bob Kahn
mempresentasikan sebuah gagasan yang lebih besar, yang menjadi cikal bakal pemikiran internet. Ide ini dipresentasikan untuk pertama kalinya di Universitas
Sussex. Hari bersejarah berikutnya adalah tanggal 26 Maret 1976, ketika Ratu
Inggris berhasil mengirimkan e-mail dari Royal Signals and Radar Establishment di Malvern. Setahun kemudian, sudah lebih dari 100 komputer yang bergabung di
ARPANET membentuk sebuah jaringan atau network. Pada 1979, Tom Truscott, Jim Ellis dan Steve Bellovin, menciptakan newsgroups pertama yang diberi nama
USENET. Tahun 1981 France Telecom menciptakan gebrakan dengan meluncurkan telpon televisi pertama, dimana orang bisa saling menelpon sambil
berhubungan dengan video link. Karena komputer yang membentuk jaringan semakin hari semakin
banyak, maka dibutuhkan sebuah protokol resmi yang diakui oleh semua jaringan. Pada tahun 1982 dibentuk Transmission Control Protocol atau TCP dan Internet
Protokol atau IP yang kita kenal semua. Sementara itu di Eropa muncul jaringan komputer tandingan yang dikenal dengan Eunet, yang menyediakan jasa jaringan
komputer di negara-negara Belanda, Inggris, Denmark dan Swedia. Jaringan Eunet menyediakan jasa e-mail dan newsgroup USENET.
Untuk menyeragamkan alamat di jaringan komputer yang ada, maka pada tahun 1984 diperkenalkan sistem nama domain, yang kini kita kenal dengan DNS
atau Domain Name System. Komputer yang tersambung dengan jaringan yang ada sudah melebihi 1000 komputer lebih. Pada 1987 jumlah komputer yang
tersambung ke jaringan melonjak 10 kali lipat menjadi 10.000 lebih.
Tahun 1988, Jarko Oikarinen dari Finland menemukan dan sekaligus memperkenalkan IRC atau Internet Relay Chat. Setahun kemudian, jumlah
komputer yang saling berhubungan kembali melonjak 10 kali lipat dalam setahun. Tak kurang dari 100.000 komputer kini membentuk sebuah jaringan. Tahun 1990
adalah tahun yang paling bersejarah, ketika Tim Berners Lee menemukan program editor dan browser yang bisa menjelajah antara satu komputer dengan
komputer yang lainnya, yang membentuk jaringan itu. Program inilah yang disebut www, atau Worl Wide Web.
Tahun 1992, komputer yang saling tersambung membentuk jaringan sudah melampaui sejuta komputer, dan di tahun yang sama muncul istilah surfing
the internet. Tahun 1994, situs internet telah tumbuh menjadi 3000 alamat halaman, dan untuk pertama kalinya virtual-shopping atau e-retail muncul di
internet. Dunia langsung berubah. Di tahun yang sama Yahoo didirikan, yang juga sekaligus kelahiran Netscape Navigator 1.0.
2.1.2 Pengertian Web atau Situs
Situs dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk menampilkan informasi, gambar gerak, suara, dan atau gabungan
dari semuanya itu baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan
dengan link-link.
2.1.3 Unsur-Unsur Web Site atau Situs
Untuk membangun situs diperlukan beberapa unsur yang harus ada agar situs dapat berjalan dengan baik dan sesuai yang diharapkan. Unsur-unsur yang
harus ada dalam situs antara lain: a. Domain Name
Domain name atau biasa disebut nama domain adalah alamat permanen
situs di
dunia internet
yang digunakan
untuk mengidentifikasi sebuah situs atau dengan kata lain domain name
adalah alamat yang digunakan untuk menemukan situs kita pada dunia internet. Istilah yang umum digunakan adalah URL. Contoh sebuah
URL adalah http:www.yahoo.com--dapat juga tanpa www-- b. Hosting
Hosting dapat diartikan sebagai ruangan yang terdapat dalam harddisk tempat menyimpan berbagai data, file-file, gambar dan lain sebagainya
yang akan ditampilkan di situs. Besarnya data yang bisa dimasukkan tergantung dari besarnya hosting yang disewadipunyai, semakin besar
hosting semakin besar pula data yang dapat dimasukkan dan ditampilkan dalam situs. Hosting juga diperoleh dengan menyewa.
Besarnya hosting ditentukan ruangan harddisk dengan ukuran MBMega Byte atau GBGiga Byte. Lama penyewaan hosting rata-
rata dihitung per tahun. Penyewaan hosting dilakukan dari perusahaan- perusahaan penyewa web hosting yang banyak dijumpai baik di
Indonesia maupun Luar Negri.
c. ScriptBahasa Program Adalah bahasa yang digunakan untuk menerjemahkan setiap perintah
dalam situs yang pada saat diakses. Jenis scripts sangat menentukan statis, dinamis atau interaktifnya sebuah situs. Semakin banyak ragam
scripts yang digunakan maka akan terlihat situs semakin dinamis, dan interaktif serta terlihat bagus. Bagusnya situs dapat terlihat dengan
tanggapan pengunjung serta frekuensi kunjungan. Beragam scripts saat ini telah hadir untuk mendukung kualitas situs.
Jenis jenis scripts yang banyak dipakai para designer antara lain HTML, ASP, PHP, JSP, Java Scripts, Java applets dsb. Bahasa dasar
yang dipakai setiap situs adalah HTML sedangkan ASP dan lainnya merupakan bahasa pendukung yang bertindak sebagai pengatur
dinamis, dan interaktifnya situs. Scripts ASP, PHP, JSP atau lainnya bisa dibuat sendiri, bisa juga dibeli
dari para penjual scripts yang biasanya berada di luar negri. Harga Scripts rata-rata sangat mahal karena sulitnya membuat, biasanya
mencapai puluhan juta. Scripts ini biasanya digunakan untuk membangun portal berita, artikel, forum diskusi, buku tamu, anggota
organisasi, email, mailing list dan lain sebagainya yang memerlukan update setiap saat.
d. Design Web Setelah melakukan penyewaan domain dan hosting serta penguasaan
scripts, unsur situs yang paling penting dan utama adalah design. Design web sangat menentukan kualitas dan keindahan situs. Design
sangat berpengaruh kepada penilaian pengunjung akan bagus tidaknya sebuah web site.
Untuk membuat situs biasanya dapat dilakukan sendiri atau menyewa jasa web designer. Saat ini sangat banyak jasa web designer, terutama
di kota-kota besar. Perlu diketahui bahwa kualitas situs sangat ditentukan oleh kualitas designer. Semakin banyak penguasaan web
designer tentang beragam programsoftware pendukung pembuatan situs maka akan dihasilkan situs yang semakin berkualitas, demikian
pula sebaliknya. Jasa web designer ini yang umumnya memerlukan biaya yang tertinggi dari seluruh biaya pembangunan situs dan
semuanya itu tergantung kualitas designer. e. Publikasi
Keberadaan situs tidak ada gunanya dibangun tanpa dikunjungi atau dikenal oleh masyarakat atau pengunjung internet. Karena efektif
tidaknya situs sangat tergantung dari besarnya pengunjung dan komentar yang masuk. Untuk mengenalkan situs kepada masyarakat
memerlukan apa yang disebut publikasi atau promosi. Publikasi situs di masyarakat dapat dilakukan dengan berbagai cara seperti dengan
pamlet-pamlet, selebaran, baliho dan lain sebagainya tapi cara ini bisa dikatakan masih kurang efektif dan sangat terbatas. cara yang biasanya
dilakukan dan paling efektif dengan tak terbatas ruang atau waktu adalah publikasi langsung di internet melalui search engine-search
engine mesin pencari, spt : Yahoo, Google, Search Indonesia, dsb.
Cara publikasi di search engine ada yang gratis dan ada pula yang membayar. Yang gratis biasanya terbatas dan cukup lama untuk bisa
masuk dan dikenali di search engine terkenal seperti Yahoo atau Google. Cara efektif publikasi adalah dengan membayar, walaupun
harus sedikit mengeluarkan akan tetapi situs cepat masuk ke search engine dan dikenal oleh pengunjung.
2.1.4 Sejarah dan Perkembangan E-Learning
E-learning atau pembelajaran elektronik pertama kali diperkenalkan oleh universitas Illinois di Urbana-Champaign dengan menggunakan sistem instruksi
berbasis komputer computer-assisted instruction dan komputer bernama PLATO. Sejak itu, perkembangan E-learning dari masa ke masa adalah sebagai
berikut: a. Tahun 1990 : Era CBT Computer-Based Training di mana mulai
bermunculan aplikasi e-learning yang berjalan dalam PC standlone ataupun berbentuk kemasan CD-ROM. Isi materi dalam bentuk tulisan
maupun multimedia Video dan AUDIO dalam format mov, mpeg-1, atau avi.
b. Tahun 1994 : Seiring dengan diterimanya CBT oleh masyarakat sejak tahun 1994 CBT muncul dalam bentuk paket-paket yang lebih menarik
dan diproduksi secara massal. c. Tahun 1997 : LMS Learning Management System. Seiring dengan
perkembangan teknologi internet, masyarakat di dunia mulai terkoneksi dengan internet. Kebutuhan akan informasi yang dapat diperoleh
dengan cepat mulai dirasakan sebagai kebutuhan mutlak , dan jarak serta lokasi bukanlah halangan lagi. Dari sinilah muncul LMS.
Perkembangan LMS yang makin pesat membuat pemikiran baru untuk mengatasi masalah interoperability antar LMS yang satu dengan lainnya
secara standar. Bentuk standar yang muncul misalnya standar yang dikeluarkan oleh AICC Airline Industry CBT Commettee, IMS,
SCORM, IEEE LOM, ARIADNE, dan sebagainya. d. Tahun 1999 sebagai tahun aplikasi e-learning berbasis web.
Perkembangan LMS menuju aplikasi e-learning berbasis web berkembang secara total, baik untuk pembelajar learner maupun
administrasi belajar mengajarnya. LMS mulai digabungkan dengan situs-situs informasi, majalah, dan surat kabar. Isinya juga semakin kaya
dengan perpaduan multimedia , video streaming, serta penampilan interaktif dalam berbagai pilihan format data yang lebih standar, dan
berukuran kecil.
2.1.5 Kelebihan dan Kekurangan E-Learning
E-learning telah mempersingkat waktu pembelajaran dan membuat biaya studi lebih ekonomis. E-learning mempermudah interaksi antara peserta didik
dengan bahanmateri, peserta didik dengan dosenguruinstruktur maupun sesama peserta didik. Peserta didik dapat saling berbagi informasi dan dapat mengakses
bahan-bahan belajar setiap saat dan berulang-ulang, dengan kondisi yang demikian itu peserta didik dapat lebih memantapkan penguasaannya terhadap
materi pembelajaran.
Dalam e-learning, faktor kehadiran guru atau pengajar otomatis menjadi berkurang atau bahkan tidak ada. Hal ini disebabkan karena yang mengambil
peran guru adalah komputer dan panduan-panduan elektronik yang dirancang oleh contents writer, designer e-learning dan pemrogram komputer.
Dengan adanya e-learning para gurudoseninstruktur akan lebih mudah : a. Melakukan pemutakhiran bahan-bahan belajar yang menjadi
tanggung jawabnya sesuai dengan tuntutan perkembangan keilmuan yang mutakhir.
b. Mengembangkan diri
atau melakukan
penelitian guna
meningkatkan wawasannya. c. Mengontrol kegiatan belajar peserta didik.
Kehadiran guru sebagai makhluk yang hidup yang dapat berinteraksi secara langsung dengan para murid telah menghilang dari ruang-ruang elektronik
e-learning ini. Inilah yang menjadi ciri khas dari kekurangan e-learning yang tidak bagus. Sebagaimana asal kata dari e-learning yang terdiri dari e elektronik
dan learning belajar, maka sistem ini mempunyai kelebihan dan kekurangan.
2.2. Pengertian Data
Menurut Gordon B. Davis menyebutkan bahwa : “Data, bahan mentah bagi informasi, dirumuskan sebagai kelompok
lambang, tidak acak yang menunjukkan jumlah-jumlah, tindakan-tindakan, hal- hal, dan sebagainya. Data-data dibentuk dari lambang grafis, lambang grafis ini
dapat berupa alphabettis, numerik atau berupa lambang-lambang khusus seperti
,, dan ~. Data-data disusun untuk mengolah tujuan-tujuan menjadi susunan d
ata atau landasan data”.
2.2.1. Pengertian Informasi
Informasi merupakan kumpulan data yang telah diolah sehingga dapat dijadikan hasil yang dapat dipresentasikan.
Menurut Gordon B. Davis menyebutkan : “Informasi adalah data yang telah diolah menjadi suatu bentuk yang
penting bagi si penerima dan mempunyai nilai yang nyata atau yang dapat dirasakan dalam keputusan-keputusan yang sekarang atau keputusan yang akan
datang”. Sedangkan Jogiyanto H.M dalam bukunya Pengenalan Komputer
berpendapat bahwa : “Informasi yaitu hasil dari pengolahan data dalam suatu bentuk yang
lebih berguna dan lebih berarti bagi penerimanya yang menggambarkan suatu kejadian-kejadian events yang nyata fact yang digunakan untuk pengambilan
keputusan”.
2.2.2. Pengertian Sistem
Pengertian dari sistem di sini merupakan pengertian yang diambil dari beberapa pengarang saja.
Seperti Gordon B. Davis dalam bukunya Management System Conseptual Foundations, Structure and Development menyebutkan :
“Sistem dapat abstrak atau fisis. Sistem yang abstrak adalah susunan yang teratur dari gangguan-gangguan atau konsepsi-konsepsi yang saling
bergantung. Misalnya, sistem teologi adalah susunan yang teratur dari gagasan tentang Tuhan, manusia dan sebagainya. Sistem yang bersifat fisis adalah
serangkaian unsur yang b ekerjasama untuk mencapai suatu tujuan”.
Sedangkan Jogiyanto H.M dalam bukunya Pengenalan Komputer mengatakan bahwa [7]:
“Sistem adalah kumpulan dari sub-sub sistem atau komponen-komponen yang saling berinteraksi, saling bekerjasama dalam satu kesatuan kerja untuk
mencapai satu tujuan tertentu”. Sedangkan sistem informasi disebutkan :
“Sistem informasi adalah suatu sistem di dalam suatu organisasi yang merupakan kombinasi dari orang-orang, fasilitas, teknologi, media, prosedur-
prosedur dan pengendalian yang ditujukan untuk mendapatkan jalur komunikasi penting, memproses tipe transaksi tertentu, memberi sinyal kepada manajemen
dan yang lainnya terhadap kejadian-kejadian internal dan eksternal yang penting dan menyediakan suatu dasar informasi untuk pengambilan keputusan yang
cerdik”.
2.2.3. Analysis Modeling
Model Analisis adalah teknik pertama untuk merepresentasikan sistem. Pemodelan analisis menggunakan kombinasi dari text dan diagram untuk
merepresentasikan kebutuhan PL data, fungsi, dan tingkah in an
understandable way. Building analysis models helps make it easier to uncover requirement inconsistencies and omissions.
Ada 2 tipe pemodelan analisis yang digunakan yaitu diantaranya analisis terstruktur dan analisis berorientasi obyek:
2.2.3.1. Model Sequensial Linear Waterfall
Metode Model waterfall mengusulkan sebuah pendekatan kepada perkembangan perangkat lunak yang sistematis dan sekuensial yang mulai pada
tingkat dan kemajuan sistem pada seluruh analisis, desain, kode, pengujian, dan pemeliharaan.
ANALISIS DESIGN
CODING TESTING
MAINTENANCE
Rekayasa Sistem
Gambar 2.1 Sequensial Linear Water Fall
Sekuensial linier mengusulkan sebuah pendekatan kepada perkembangan perangkat lunak yang sistematis dan sekuensial yang mulai pada tingkat dan
kemajuan sistem pada seluruh analisis, desain, kode, penguji, dan pemeliharaan. Dimodelkan setelah siklus rekayasa konvensional, model sekuensial linier
melingkupi aktivitas-aktivitas sebagai berikut Pressman, Rekayasa Perangkat Lunak:
Rekayasa dan pemodelan sisteminformasi . Karena perangkat lunak selalu
merupakan bagian dari sebuah sistem bisbis yang lebih besar, kerja dimulai
dengan membangun syarat dari semua elemen sistem dan mengalokasikan beberapa subset dari kebutuhan ke perangkat lunak tersebut. Pandangan sistem ini
penting ketika perangkat lunak harus berhubungan dengan elemen-elemen yang lain seperti perangkat lunak, manusia, dan database. Rekayasa dan analisis sistem
menyangkut pengumpulan kebutuhan pada tingkat sistem dengan sejumlah kecil analisis serta desain tingkat puncak. Rekayasa informasi mencakup juga
pengumpulan kebutuhan pada tingkat bisnis strategis dan tingkat area bisnis.
Analisis kebutuhan perangkat lunak . Proses pengumpulan kebutuhan
diintensifkan dan difokuskan, khususnya pada perangkat lunak. Untuk memahami sifat program yang dibangun, perekayasa perangkat lunak analisis muka
interface yang diperlukan. Kebutuhan baik untuk sistem maupun perangkat lunak didokumentasikan dan dilihat lagi dengan pelanggan.
Desain . Desain perangkat lunak sebenarnya adalah proses multi langkah yang
berfokus pada empat atribut sebuah program yang berbeda; struktur data, arsitektur perangkat lunak, representasi interface. Proses desain menerjemahkan
syaratkebutuhan ke dalam sebuah representasi perangkat lunak yang dapat diperkirakan demi kualitas sebelum dimulai pemunculan kode. Sebagaimana
persyaratan, desain didokumentasikan dan menjadi bagian dari konfigurasi perangkat lunak.
Generate Code. Desain harus diterjemahkan ke dalam bentuk mesin yang bisa
dibaca. Langkah pembuatan kode melakukan tugas ini. Jika desain dilakukan dengan cara yang lengkap, pembuatan kode dapat diselesaikan secara mekanis.
Pengujian . Sekali kode dibuat, pengujian program dimulai. Proses pengujian
berfokus pada logika internal perangkat lunak, memastikan bahwa semua
pernyataan sudah diuji, dan pada external fungsional yaitu mengarahkan pengujian untuk menemukan kesalahan-kesalahan dan memastikan bahwa input
yang dibatasi akan memberikan hasil aktual yang sesuai dengan hasil yang dibutuhkan.
Pemeliharaan . Perangkat lunak akan mengalami perubahan setelah disampaikan
kepada pelanggan perkecualian yang mungkin adalah perangkat lunak yang dilekatkan. Perubahan akan terjadi karena kesalahan-kesalahan ditentukan,
karena perangkat lunak harus disesuaikan untuk mengakomodasikan perubahan- perubahan di dalam lingkungan eksternalnya, atau karena pelanggan
membutuhkan perkembangan fungsional atau unjuk kerja.
2.2.3.2. Diagram Alir Data Data Flow Diagram
Data Flow Diagram DFD digunakan untuk menggambarkan alur kerja dari sistem yang akan dibangun atau sistem yang sedang berjalan. Data Flow
Diagram merupakan alat bantu pengembangan sistem terstruktur, yang terdiri dari beberapa level
2.2.3.3. Diagram Konteks DFD Level 0
Diagram konteks merupakan langkah awal dalam perancangan sistem terstruktur yang merupakan gambaran sistem secara garis besar umum, dengan
menggambarkan aliran-aliran data ke dalam dan ke luar sistem. Diagram konteks merupakan pola pengambaran yang berfungsi untuk memperlihatkan interaksi
sistem informasi tersebut dengan lingkungan di mana sistem tersebut ditempatkan.
Dalam pengambaran ini, sistem dianggap sebuah objek yang tidak dijelaskan secara rinci karena yang ditekankan adalah interaksi sistem dengan
lingkungan yang akan mengaksesnya.
2.2.3.4. Pengolahan Data
Pengolahan data merupakan segala macam pengolahan terhadap data atau kombinasi dari berbagai macam pengolahan data untuk menghasilkan sebuah
informasi yang diharapkan. Pengolahan data jika ditinjau dari aplikasinya merupakan satu kesatuan
yang saling berhubungan satu sama lain yang terdiri dari perangkat keras hardware, perangkat lunak software, pemakai atau tenaga pelaksana
brainware. Data merupakan bagian yang sangat penting dalam suatu pengolahan data untuk dijadikan sebuah informasi yang berguna.
Sebelum data diolah menjadi sebuah informasi, maka harus melalui tahapan-tahapan sebagai berikut:
Gambar 2.2 : Aliran Pemrosesan Data menjadi Informasi
Data Proses
Informasi
Penyimpan
2.2.4. Basis Data Database
Basis Data merupakan komponen terpenting dalam pembangunan Sistem Informasi, karena menjadi tempat untuk menampung dan mengorganisasikan
seluruh data yang ada dalam sistem, sehingga dapat diekplorasi untuk menyusun informasi-informasi dalam berbagai bentuk. Basis Data merupakan himpunan
kelompok data yang saling berkaitan. Data tersebut diorganisasikan sedemikian rupa agar tidak terjadi duplikasi yang tidak perlu, sehingga dapat diolah atau
diekplorasi secara cepat dan mudah untuk menghasilkan informasi. Basis data didefinisikan [1]:
“Himpunan kelompok data arsip yang saling berhubungan yang diorganisasikan sedemikian rupa gar kelak dapat dimanfaatkan kembali dengan
cepat dan mudah yang disimpan salam media penyimpanan elektronis”. Sistem basis Data terus dikembangkan oleh para ahli agar dapat diperoleh
cara pengorganisasian data yang efesien dan efektif. Hal ini diperlukan karena sekarang ini berbagai bidang usaha telah menjadikan sebagai tumpuan manajemen
informasi perusahaan. Adapun penerapan sistem basis data ini antara lain untuk pembangunan
sistem informasi, penyediaan barang, kepegawaian, akutansi, pemasaran, produksi, reservasi, lanyanan pelanggan yang digunakan dalam perusahaan retail,
perbankan, perhotelan dan pariwisata, rumah sakit, institusi pendidikan dan lain sebagainya.
2.2.4.1. Database Server dan Bahasa Scripting yang digunakan
Di dalam pembuatan e-learning sistem ini, ada berbagai macam aplikasi dan bahasa scripting yang dapat digunakan. Walaupun pada dasarnya pendaftran
Fitness online adalah sebuah website, tetapi pembuatan halaman-halaman yang akan menampilkan informasi, tidak seperti pembuatan halaman-halaman web
umumnya. Sebagai contoh, bila pada sebuah halaman web biasa, bila kita ingin merubah isinya, maka yang kita lakukan adalah menyunting halaman tersebut
sesuai keinginan dengan menggunakan web page builder semacam Microsoft FrontPage, Macromedia Dreamweaver, Adobe Page Mill, Adobe GoLive dan
lain-lain. Tetapi bila kita menginginkan perubahan data yang dimuat pada sebuah
halaman dari sebuah situs pendaftaran secara online, maka yang kita lakukan adalah menyunting data pada database yang menyimpan data yang ditampilkan
pada halaman yang ingin kita ubah tersebut. Dalam pembuatan e-learning ini, penulis menggunakan aplikasi PHP
sebagai server side scripting, MySQL untuk pengolahan database dan Apache sebagai web servernya. MySQL mendukung penyimpanan data dalam jumlah
besar 50.000.000 + records, serta memiliki kemampuan untuk menangani user secara simultan dalam jumlah tak terbatas. Bahasa scripting PHP merupakan
bahasa yang kompatibel dengan MySQL, serta PHP bersifat fleksibel, kita dapat memasukkan script HTML maupun JavaScript kedalam script PHP sehingga
memudahkan untuk merancang tampilan dari halaman yang kita buat dengan script PHP.
2.2.5. Database Management System DBMS
Definisi DBMS pada sejumlah literartur sangatlah bervariasi. Secara umum, DBMS diartikan sebagai suatu program komputer yang digunakan untuk
memasukkan, mengubah, menghapus, memanipulasi, dan memperoleh data atau informasi dengan praktis dan efisien. DBMS dapat menjadi alternatif penggunaan
secara khusus untuk aplikasi, semisal penyimpanan data dalam field dan menulis kode aplikasi yang spesifik untuk pengaturannya.
Diperlukan suatu sistem untuk diintegrasikan data file kedalam suatu file sehingga bisa melayani berbagai user yang berbeda. Perangkat keras dan lunak
serta prosedur yang mengelola database merupakan suatu database manajemen sistem. DBMS memungkinkan untuk membentuk dan meremajakan file-file,
memilih, mendatakan dan menyortir data, dan untuk menghasilkan laporan- laporan.
Fungsi yang penting dari DBMS adalah sebagai berikut : 1.
Menyediakan sistem access cepat. 2.
Mengurangi kerangkapan data atau redudancy data. 3.
Memungkinkan adanya updating secara bersama. 4.
Menyediakan sistem yang memungkinkan dilakukannya pengembangan terhadap database.
5. Memberikan perlindungan dari pihak pemakai yang tidak berhak
Dibandingkan dengan sistem yang berbasis kertas, DBMS memiliki 4 keunggulan :
1. Kepraktisan
: Sistem yang berbasis kertas akan menggunakan kertas yang sangat
banyak untuk
menyimpan informasi,
sedangkan DBMS
menggunakan media penyimpan sekunder yang berukuran kecil tetapi padat informasi.
2. Kecepatan
: Mesin dapat mengambil atau mengubah data jauh lebih cepat daripada manusia.
3. Mengurangi kejemuan
: Orang cenderung menjadi bosan kalau melakukan tindakan-tindakan berulang yang menggunakan tangan misalnya harus
mengganti suatu informasi. 4.
Kekinian : Informasi yang tersedia pada DBMS akan bersifat mutakhir dan
akurat setiap saat.
2.2.6. Diagram E-R
Diagram E-R adalah diagram grafikal keseluruhan struktur logika dari sebuah basis data. Entity Relationship diagram tidak mengambarkan aliran data
atau proses data. E-R Diagram mengambarkan data pada data store. Diagram E-R berfungsi untuk menggambarkan relasi dari dua file atau
dua tabel yang dapat digolongkan dalam tiga macam bentuk relasi yaitu satu ke satu, satu ke banyak dan banyak ke banyak.
Model Entity-Relationship yang berisi komponen-komponen Himpunan Entitas dan Himpunan Relasi yang masing-masing dilengkapi dengan atribut-
atribut yang mempresentasikan seluruh fakta yang kita tinjau, dapat digambarkan dengan lebih sistematis dengan menggunakan Diagram Entity-Relationship
Diagram E-R.
2.2.7. Normalisasi
Normalisasi adalah ”suatu teknik yang menstrukturkan data dalam cara- cara tertentu untuk mengurangi atau mencegah timbulnya masalah yang
berhubungan dengan pengolahan data dalam database”. Normalisasi juga dapat
diartikan ”proses pengelompokkan data elemen menjadi tabel-tabel yang menunjukkan entitas dan relasinya.
Konsep-konsep pada normalisasi, antara lain : 1.
Key field key attribute kunci atribut yaitu suatu kunci field yang mewakili record tupple.
2. Candidate key kunci kandidat yaitu saat atribut atau satu set atribut yang
mengidentifikasikan secara unik dari suatu entity. 3.
Primary key kunci primer yaitu satu atribut atau satu set atribut yang mengidentifikasi secara unik dan mewakili setiap kejadian pada suatu entity.
4. Alternate key kunci alternatif yaitu kunci kandidat yang diapakai sebagai
kunci primer. 5.
Foreign key kunci tamu yaitu satu atribut atau satu set atribut dan melengkapi hubungan yang menunjukkan ke induknya.
Bentuk-bentuk normalisasi, yaitu : 1.
Normal satu 1NF First Normal Form relasi berada pada normal kesatu jika semua atribut mempunyai nilai yang bersifat atomic
2. Normal dua 2NF Second Normal Form relasi berada pada normal kedua
jika relasi tersebut merupakan normal satu dan atribut bukan merupakan kunci tergantung penuh pada kunci primer.
3. Normal tiga 3NF Three Normal Form relasi berada pada normal ketiga
jika relasi tersebut merupakan normal dua dan atribut bukan kunci tidak tergantung secara transitif pada kunci primer.
4. BCNF boyce Codd Normal Form relasi berada pada BCNF jika dan
hanya jiak faktor penentuannya adalah kunci kandidat dan relasi tersebut normal tiga.
2.2.8. Ilmu Tajwid
Ilmu tajwid ialah ilmu yang digunakan untuk mengetahui bagaimana sebenarnya membunyikan huruf-huruf dengan betul, baik huruf yang berdiri
sendiri maupun huruf dalam rangkaian.
2.2.8.1. Guna Tajwid
Guna ilmu tajwid ialah untuk memelihara bacaan Al- Qur’an dari
kesalahan dan perubahan serta memelihara lisan dari kesalahan membacanya. Mempelajari ilmu tajwid hukumnya Fardlu Kifayah. Membaca Al-
Qur’an dengan
baik sesuai dengan ilmu tajwid hukumnya Fardlu Ain [9]. 2.2.8.2.
Macam Hukum Tajwid
Macam-macam hukum tajwid antara lain adalah Nun Sukun dan
Tanwin . Nun sukun adalah huruf yang ditandai seperti : , nun sukun
dalam rangkaian adalah seperti : . Tanwin adalah suara Nun Sukun
bukan nun sukun tetapi bunyi suara nun sukun yang terdapat di akhir kata benda
. Tanwin merupakan tanda harokah rangkap, umpamanya : - Suara AN ditandai dengan PATCHATAIN :
- Suara IN ditandai dengan KASROTAIN :
- Suara UN ditandai dengan DLOMMATAIN : Ada lima hukum bacaan nun sukun dan tanwin
1. Idhar Idhar yaitu membaca dengan terang atau mengeluarkan huruf dengan tiada
bercampur ghunnah mendengung dan tasydid, hukum bacaannya apabila ada tanwin atau nun sukun bertemu dengan salah satu huruf halaq, hukumnya wajib
di baca izhar halqi. Adapun huruf halaq itu ada 6 yaitu : hamzah , ha’ , ain
, cha , ghoin
, dan kho .
2. Idgham Bighunnah Idgham artinya : memasukkan, bighunnah artinya : dengan mendengung.
Hukum bacaan disebut idghom bighunaah ialah bila NUN SUKUN atau TANWIN bertemu salah satu huruf empat ini, yaitu : yaa
, nun , miem
, dan wawu dalam dua perkataan. Cara membacanya : nun sukun atau
tanwin itu dimasukkan menjadi satu dengan huruf sesudahnya atau ditasydidkan dan dengan mendengung.
3. Idgham Bilaghunnah
BILA artinya : dengan tidak. Hukum bacaan disebut ID-GHOM BILAGHUNNAH bila atau bertemu dengan huruf dan . Cara membacanya meng-id-ghomkan nun atau
tanwin pada LAM dan RO tetapi tanpa mendengung.
4. Iqlab
Iqlab artinya : menukar atau mengganti. Hukum bacaan disebut IQLAB ialah apabila nun sukun atau tanwin bertemu dengan huruf BA
. Cara membacanya dengan menyuarakan
atau menjadi suara MIEM
, dengan merapatkan dua bibir serta mendengung
5. Ikhfa’
IKHFA artinya : menyamarkan. Hukum bacaan disebut IKHFA yaitu jika atau
bertemu salah satu huruf hijaiyah, selain huruf-huruf Chalqi, huruf-huruf Id- ghom Bighunnah dan Id-ghom Bilaghunnah dan huruf Iqlab, yaitu huruf-huruf :
Cara membacanya adalah suara NUN maupun TANWIN masih tetap terdengar tetapi samar antara idh-har dan id-ghom, lagipula terus bersambung dengan makhroj
huruf berikutnya, sehingga kedengar annya berbunyi seperti “NG” jika bertemu
dan ada kalanya mirip suara “NY” dan “NG” jika bertemu ada kalanya seperti “NY” jika bertemu dan ada kalanya tetap
berbunyi huruf ketika bertemu dengan huruf-huruf .
2.2.9. Qiroati
Buku qiroati ini pengarangnya adalah H. Dachlan Salim Zarkasyi dariSemarang. Buku qiro
’ati ini pertama kali terbit pada tanggal 1 Juli 1986, bertepatan dengan berdirinya TK. Al-
Qur’an yang pertama dibumi Indonesia. an bukan mustahil TK. Al-
Qur’an yang pertama di dunia. Dahulu, buku ini tersusun menjadi delapan jilid. Setelah diadakan penelitian ulang, akhirnya menemukan
metode terbaru, hanya enam jilid. Dengan enam jilid buku yang terbaru ini, hasilnya jauh lebih mudah dari buku delapan jilid susunan lama.
Buku Qiroati untuk TK. Al-Qur ’an yang disusun 1 Juli 1986 ini sumber
pengambilannya dari buku Qiro ’ati sepuluh jilid yang disusun pada tahun 1963.
Pada tahun inilah pertama ditemukan metode praktis yang sekaligus memasukkan bacaan
Sistematika Pembelajaran antara lain : 1.
Jilid 1 1 Dalam jilid 1 ini dikenalkan bunyi huruf A, Ba dan seterusnya.
2 Dibaca langsung huruf hidup dua-dua huruf atau tiga-tiga huruf, dengan cepat dan tidak memanjangkan suara huruf yang pertama atau
huruf yang terakhir. 3 Supaya dibaca sama pendeknya setiap hurufnya.
4 Pelajaran dalam kotak baris paling bawah, huruf hijaiyah dibaca 5 menurut kelompok huruf ALIF, BA, TA, TSA.
2. Jilid 2
1 Dibaca langsung huruf hidup, tidak diurai. 2 Setiap tulisan dalam kotak baris bawah, termasuk pelajaran yang harus
dibaca oleh murid. 3 Halaman 25 sampai akhir, pelajaran MAD. Mad dengan ALIF, YA,
WAWU. 4 Dan setiap murid membaca MAD, supaya jelas panjang dan
pendeknya. 5 Murid dibolehkan melanjutkan ke jilid berikutnya, apabila telah dapat
membaca lancar tanpa ada salah baca 3.
Jilid 3 1 Dibaca langsung tidak diurai, jangan dipindah ke halaman berikutnya
jika belum dapat membaca lancar tanpa banyak salah membaca.
2 Garis paling bawah dalam kotak dibaca menurut bacaan hijaiyah tanpa suara panjang.
4. Jilid 4
1 Mengenalkan huruf NUN sukun langsung dengan bacaan tajwid, setiap
TANWIN harus dibaca dengung sebab suara TANWIN sama dengan suara NUN sukun.
2 Mengenalkan bacaan MAD wajib atau jaiz supaya dibaca panjang yang nyata.
3 Pelajaran makhroj SIN dan SYIN, HA cha dan KHA cho supaya dibaca dengan makhroj sebaik mungkin.
4 Mengenalkan setiap huruf NUN dan MIM bertasydid supaya dibaca GHUNNAH nyata.
5 Mengenalkan semua huruf-huruf yang bertasydid supaya ditekan
membacanya termasuk bacaan syamsiyah. 6
Mengenalkan huruf WAWU yang tidak dibaca sebab tidak ada tanda harokat.
7 Setiap MIM sukun tidak boleh dibaca dengung, kecuali MIM sukun berhadapan dengan huruf MIM harus dibaca dengung.
8 Setiap huruf NUN sukun jika berhadapan dengan huruf MIM, suara NUN
sukun hilang. Ditukar dengan suara MIM sukun. 9 Setiap NUN sukun atau TANWIN jika berhadapan dengan huruf LAM atau
RO, suara NUN sukun atau TANWIN hilang, ditukar dengan suara LAM atau RO sukun.
10 Pelajaran dalam kotak baris paling bawah, harus dibaca.
11
Tidak dibenarkan pindah ke jilid berikutnya jika belum dapat membacalancar tanpa salah baca
5. Jilid 5
1 Setiap NUN sukun atau TANWIN, jika berhadapan dengan huruf YA,
2 suara NUN sukun atau TANWIN masuk ke huruf YA yang dibaca dengung. 3 Setiap FATHATAIN atau FATHAH BERDIRI, waqofnya dibaca panjang.
4 Selain fathatain waqofnya dibaca sukun.
5 Setiap NUN sukun atau TANWIN berhadapan dengan huruf BA, suara
6
NUN sukun atau TANWIN ditukar dengan suara MIM sukun.
6. Jilid 6
1 Inti pelajaran jilid enam ini, khusus bacaan Idh-har Chalqi.
2
NUN sukun atau TANWIN tidak boleh dibaca dengung jika berhadapan dengan huruf Hamzah , ha
, ain , cha , ghoin dan kho
2.2.10. Konsep Multimedia Pembelajaran Interaktif
Multimedia terbagi menjadi dua kategori, yaitu: multimedia linier dan multimedia interaktif. Multimedia linier adalah suatu multimedia yang tidak
dilengkapi dengan alat pengontrol apapun yang dapat dioperasikan oleh pengguna. Multimedia ini berjalan sekuensial berurutan, contohnya: TV dan
film. Multimedia interaktif adalah suatu multimedia yang dilengkapi dengan alat pengontrol yang dapat dioperasikan oleh pengguna, sehingga pengguna dapat
memilih apa yang dikehendaki untuk proses selanjutnya. Contoh multimedia interaktif adalah pembelajaran interaktif, aplikasi game, dll. Sedangkan
pembelajaran diartikan
sebagai proses
penciptaan lingkungan
yang memungkinkan terjadinya proses belajar. Jadi dalam pembelajaran yang utama
adalah bagaimana siswa belajar. Belajar dalam pengertian aktifitas mental siswa dalam berinteraksi dengan lingkungan yang menghasilkan perubahan perilaku
yang bersifat relatif konstan. Dengan demikian aspek yang menjadi penting dalam aktifitas belajar adalah lingkungan. Bagaimana lingkungan ini diciptakan dengan
menata unsurunsurnya sehingga dapat mengubah perilaku siswa. Dari uraian di atas, apabila kedua konsep tersebut kita gabungkan maka multimedia
pembelajaran dapat diartikan sebagai aplikasi multimedia yang digunakan dalam proses pembelajran, dengan kata lain untuk menyalurkan pesan pengetahuan,
keterampilan dan sikap serta dapat merangsang pilihan, perasaan, perhatian dan kemauan siswa sehingga secara sengaja proses belajar terjadi, bertujuan dan
terkendali. Pembelajaran, Menurut Usman 2000 : 4 “ … proses pembelajaran
merupakan suatu proses yang mengandung serangkaian perbuatan guru dan siswa atas dasar hubungan timbal balik yang berlangsung dalam situasi edukatif untuk
mencapai tujuan tertentu” Proses pembelajaran merupakan interaksi semua komponen atau unsur yang terdapat dalam pembelajaran yang satu sama lain
saling berhubungan dalam sebuah rangkaian untuk mencapai tujuan. Menurut Sudjana 1989 : 30 yang termasuk dalam komponen pembelajaran adalah
“ tujuan, bahan, metode dan alat serta penilaian “Metode mengajar yang digunakan
guru hampir tidak ada yang sisa-sia, karena metode tersebut mendatangkan hasil dalam waktu dekat atau dalam waktu yang relatif lama.
Menurut teori-teori Gestalt-field Dahar, 1996, belajar merupakan suatu proses perolehan atau perubahan terhadap pengertian-pengertian yang mendalam
insights, pandangan-pandangan outlooks, harapan-harapan, atau pola-pola berpikir. Dalam proses perolehan atau perubahan terhadap pengertian-pengertian
yang mendalam insights diperlukan suatu alat pendidikan ataupun media pembelajaran. Dengan bantuan media dapat diajarkan cara-cara mencari informasi
baru, menyeleksinya dan kemudian mengolahnya, sehingga terdapat jawaban terhadap suatu pertanyaan.
Hamalik 1986 dalam azhar Arsyad 2002 mengemukakan bahwa pemakaian media pembelajaran dalam proses belajar mengajar dapat
membangkitkan keinginan dan minat yang baru, membangkitkan motivasi dan rangsangan kegiatan pembelajaran dan bahkan membawa pengaruh-pengaruh
psikologis terhadap siswa. Penggunaan media pembelajaran akan sangat membantu efektifitas proses pembelajaran serta penyampaian pesan dan isi
pelajaran sehingga dapat membantu siswa meningkatkan pemahaman karena menyajikan informasi secara menarik dan terpercaya. Selain itu media
pembelajaran juga dapat memudahkan penafsiran data dan memadatkan informasi. Hal ini memungkinkan tercapainya tujuan pembelajaran, yang pada
akhirnya dapat meningkatkan proses dan hasil belajar.
Lee, Nicoll, dan Brooks 2005 dalam penelitiannya tentang ”Perbandingan Pembelajaran Berbasis Web secara Inkuiri dan Contoh Kerja 37
dengan Menggunakan Physlets ”, menemukan bahwa siswa merasa tertolong
dengan penggunaan model pembelajaran MMI jenis Physlets, dalam hal memvisualisasikan konsep-konsep yang bersifat abstrak menjadi lebih konkret.
Ada beberapa format yang mendukung suatu pembelajaran yang interaktif. Namun disini penulis hanya menggunakan beberapa format tersebut
untuk menerapkan konsep pembelajaran yang interaktif pada website ini yaitu :
2.2.10.1 Format Tutorial
Format sajian ini merupakan multimedia pembelajaran yang dalam penyampaian materinya dilakukan secara tutorial, sebagaimana layaknya tutorial
yang dilakukan oleh guru atau instruktur. Informasi yang berisi suatu konsep disajikan dengan teks, gambar, baik diam atau bergerak dan grafik. Pada saat yang
tepat, yaitu ketika dianggap bahwa pengguna telah membaca, menginterpretasikan dan menyerap konsep itu, diajukan serangkaian pertanyaan atau latihan
2.2.10.2 Format Driil and Practise
Format ini dimaksudkan untuk melatih pengguna sehingga mempunyai kemahiran di dalam suatu keterampilan atau memperkuat penguasaan terhadap
suatu konsep. Program ini juga menyediakan serangkaian soal atau pertanyaan yang biasanya ditampilkan secara acak, sehingga setiap kali digunakan maka soal
atau pertanyaan yang tampil akan selalu berbeda, atau paling tidak dalam
kombinasi yang berbeda.
2.3. Jaringan Komputer
Jaringan komputer yang digunakan dewasa ini dapat dikelompokkan berdasarkan luasan area yang dapat dijangkau. Luasan area ini pada mulanya
ditentukan berdasarkan jarak jangkau dalam satuan meter. Namun dalam perkembangan selanjutnya berdasarkan peralatan dan fasilitas.
Penggunaan peralatan –peralatan yang dimaksud adalah peralatan–
peralatan inter jaringan seperti Repeater, Router atau Gateway dari peralatan tersebut dapat dilihat jangkauan area jaringan dan luasan segmen jaringan yang
dibangun. Berdasarkan kriteria –kriteria tersebut jaringan komputer dapat
digolongkan :
2.3.1. LAN Local Area Network
Sebuah LAN adalah jaringan yang dibatasi oleh area yang relatif kecil, umumnya dibatasi oleh area lingkungan seperti sebuah perkantoran di sebuah
gedung, atau sebuah sekolah, dan biasanya sekitar 1 km persegi.. Komputer- komputer yang terhubung ke dalam jaringan itu biasanya disebut dengan
workstation. Kebanyakan LAN menggunakan media kabel untuk menghubungkan antara satu komputer dengan komputer lainnya.
2.3.2. MAN Metropolitan Area Network
Sebuah MAN, biasanya meliputi area yang lebih besar dari LAN, misalnya antar wilayah dalam satu provinsi. Dalam hal ini jaringan
menghubungkan beberapa buah jaringan-jaringan kecil ke dalam lingkungan area yang lebih besar, sebagai contoh yaitu : jaringan Bank dimana beberapa kantor
cabang sebuah Bank di dalam sebuah kota besar dihubungkan antara satu dengan lainnya.
UNIVERSITY
MAN Gedung Pemerintahan
Universitas Kantor
Hotel dan Apartemen
Gambar 2.3 Contoh Metropolitan Area Network MAN
2.3.3. WAN Wide Area Network
Wide Area Networks WAN adalah jaringan yang lingkupnya biasanya sudah menggunakan sarana satelit ataupun kabel bawah laut sebagai contoh
keseluruhan jaringan suatu Bank yang ada di Indonesia ataupun yang ada di negara - negara lain. menggunakan sarana WAN, Sebuah Bank yang ada di
Bandung bisa menghubungi kantor cabangnya yang ada di Jepang, hanya dalam beberapa menit. Biasanya WAN agak rumit dan sangat kompleks, menggunakan
banyak sarana untuk menghubungkan antara LAN dan WAN ke dalam komunikasi global seperti Internet. Tapi bagaimanapun juga antara LAN, MAN
dan WAN tidak banyak berbeda dalam beberapa hal, hanya lingkup areanya saja yang berbeda satu diantara yang lainnya.
Bandung Makasar
Pekanbaru WAN
Gambar 2.4 Contoh Wide Area Network WAN
2.3.4. GAN Global Area Network
GAN merupakan suatu jaringan yang menghubungkan negara-negara di seluruh dunia. Kecepatan GAN bervariasi mulai dari 1,5 Mbps sampai dengan
100 Gbps dan cakupannya mencakupi ribuan kilometer. Contoh yang sangat baik dari GAN ini adalah Internet.
Eropa Afrika
Asia
Amerika
GAN WAN
WAN WAN
WAN
Ganbar 2.5 contoh Global Area Network GAN
LAN, MAN, WAN, dan GAN dapat berinteraksi satu sama lain. Gambar 2.4
memperlihatkan interaksi antara jaringan-jaringan tersebut.
iMac iMac
iMac
NDPS Manager
NDPS Manager
LAN WAN
GAN MAN
Building Bbased
City Based
Country Based
Word Based
Gambar 2.6 Interaksi antara LAN, WAN, MAN, dan GAN
2.4. MySQL
MySQL adalah sebuah database server yang dibuat oleh Tcx Data KonsultAB. Saat ini MySQL telah digunakan oleh perusahaan-perusahaan
terkemuka di seluruh dunia, diantaranya Silicon Graphics http:www.sgi.com, Siemens Nixdorf http:www.siemens.com, Alesis Digital Studio Electronics
http:www.alesis.com dan masih banyak perusahaan-perusahaan terkemuka lainnya yang menggunakan MySQL.
Perusahaan- perusahaan tersebut dapat dilihat pada MySQL user’s list di
http:www.mysql.cominformationuserlist.htm. MySQL adalah sebuah text based database server, artinya MySQL tidak dibuat dalam bentuk aplikasi yang
memiliki Graphical User Interface.
2.5. PHP
PHP Personal Home Page dahulunya merupakan objek pribadi dari Rasmus Lerdorf PHP versi 1 yang digunakan untuk membuat homepage
pribadinya. PHP merupakan scripting yang menyatu dalam HTML dan berada di server server side HTML
– embeded scripting yang digunakan untuk membuat halaman web yang dinamis Ono W. Purbo : 2000 : 27.
Dinamis berarti halaman yang akan ditampilkan dibuat saat halaman itu diminta oleh client. Mekanisme ini menyebabkan informasi yang diterima client
selalu yang terbaru. Semua script PHP dieksekusi pada server dimana script tersebut dijalankan. Oleh karena itu, spesifikasi server lebih berpengaruh pada
eksekusi dari script PHP daripada spesifikasi client. Namun tetap diperhatikan bahwa halaman web yang dihasilkan tentunya harus dapat dibuka
oleh browser pada client. Dalam hal ini versi dari html yang digunakan harus didukung oleh browser client.
Style standar PHP selalu diawali dengan ?php dan diakhiri dengan tanda ? dan style PHP ini sangat mirip dengan program XML atau seperti pada C atau
Perl. Selain itu PHP juga mendukung komentar C, C++, dan Unix shell-style.
41
BAB III ANALISIS DAN PERANCANGAN
3.1 Analisis Sistem
Analisis sistem systems analysis dapat didefinisikan sebagai penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan
maksud untuk
mengidentifikasikan dan
mengevaluasi permasalahan-
permasalahan, kesempatan-kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-
perbaikannya.[1] 3.1.1
Analisis masalah
Dalam membaca Al- Qur’an terdapat kaidah-kaidah dalam pengucapan huruf
hijaiyah hukum tajwid yang harus dimengerti dan dipahami oleh pembaca Al- Qur’an tetapi pada prakteknya sering tidak diindahkan, banyak yang hanya
sekedar membaca tanpa mengetahui hukumnya. Kendala-kendala yang dihadapi dalam proses belajar membaca Al-Q
ur’an bagi pemula adalah dalam proses pengucapan huruf masih belum bisa membedakan antara pengucapan huruf satu
dengan huruf yang lain dalam huruf hijaiyah dengan lafal yang hamper sama, contoh
Qof dengan Kho’,
Dlod dengan Dho’, Dal dengan
Dzal, pada saat pengucapan panjang dan pendek huruf hijaiyah masih belum dapat membedakan antara huruf yang seharusnya dibaca panjang atau pendek.
Selain itu kendala lain dalam belajar membaca Al- Qur’an ialah sering kali harus
berhadapan dengan rasa malu, malas dan gengsi, belum lagi panjangnya waktu
42
pengajaran dan tingkat kesulitan metode pengajaran yang sering tak teratasi oleh sang guru, semua ini merupakan kendala yang selama ini di hadapi oleh mereka
yang ingin bisa membaca Al- Qur’an dengan baik dan benar.
Untuk membatu menyelesaikan beberapa kendala yang ada, maka salah satu solusi yang bisa diambil adalah dengan membangun suatu pembelajaran membaca
Al- qur’an yang berbasis web dengan menggunakan audio visual yang
memungkinkan user dapat mengakses secara langsung serta mendapatkan kemudahan dalam proses pembelajarannya. Pembangunan perangkat lunak
pembelajaran ini dibuat secara dinamis yang bertujuan untuk dapat dikembangkan kembali setiap saat sehingga memberikan kemudahan maintenance bagi
administrator dalam meng-update materi dan latihan. Disisi lain memberikan kemudahan dan kenyamanan bagi pengguna dalam mendapatkan informasi dan
materi – materi.
3.1.2 Analisis yang sedang berjalan
Pada tahap analisis ini memberikan gambaran tentang sistem pembelajaran yang sedang berjalan. Analisis sistem bertujuan untuk mengetahui lebih jelas
bagaimana cara kerja sistem pembelajaran tersebut, sehingga kelebihan dan kekurangan sistem pembelajaran dapat diketahui.
3.1.2.1 Prosedur Pembelajaran Tahap Pertama
Pada pembelajaran tahap pertama ini diberikan materi pembelajaran tentang pengenalan huruf hijaiyah, huruf mad panjang, qalqalah, dan waqaf. Untuk
tahapannya adalah sebagai berikut:
43
1. Pengajar ustadz mengajarkan materi pembelajaran pengenalan huruf hijaiyah, huruf mad panjang, qalqalah, dan waqaf
2. Siswa anak mempelajari dan menghapal materi pembelajaran yang diberikan.
3. Apabila siswa anak belum mengerti tentang materi dan terdapat kesalahan dalam pembacaan, maka Pengajar ustadz mengulang kembali
materi 4. Apabila sudah mengerti dan benar dalam pembacaan, maka diberikan
suatu latihan. Berikut dapat dilihat penjelasan mengenai pembelajaran tahap pertama pada
gambar 3.1
Materi Pengenalan Huruf Hijaiyah
Materi Huruf Mad Panjang
Materi Qalqalah
Diajarkan
Mengerti Dipelajari dan
Dihapalkan
Latihan A1
Pengajar Ustadz Siswa Anak
Tidak Ya
Materi Pengenalan Huruf Hijaiyah
Materi Huruf Mad Panjang
Materi Qalqalah
Gambar 3.1 Flowmap prosedur pembelajaran tahap pertama
44
3.1.2.2 Prosedur Pembelajaran Tahap Kedua
Pada pembelajaran tahap kedua diberikan pembelajaran mengenai tajwid dasar antara lain pengenalan iz-haar, idghaam, iqlaab dan ikhfaa. Untuk tahapannya
adalah sebagai berikut: 1. Pengajar ustadz mengajarkan materi pembelajaran iz-haar, idghaam,
iqlaab dan ikhfaa 2. Siswa anak mempelajari dan menghapal materi pembelajaran yang
diberikan. 3. Apabila siswa anak belum mengerti tentang materi dan terdapat
kesalahan dalam pembacaan, maka Pengajar ustadz mengulang kembali materi
4. Apabila sudah mengerti dan benar dalam pembacaan, maka diberikan suatu latihan
Berikut dapat dilihat penjelasan mengenai pembelajaran tahap kedua pada gambar 3.2
45
Diajarkan
Mengerti Dipelajari dan
Dihapalkan
Latihan
A2
Pengajar Ustadz Siswa Anak
Tidak Ya
Materi Iz-haar Materi Idghaam
Materi Iqlaab Materi Ikhfaa
Materi Iz-haar Materi Idghaam
Materi Iqlaab Materi Ikhfaa
Gambar 3.2 Flowmap prosedur pembelajaran tahap kedua
3.1.3 Analisis kebutuhan non-fungsional
Analisis kebutuhan non fungsional pada website pembelajaran ini meliputi analisis pemakai, analisis perangkat lunak dan analisis perangkat keras.
3.1.3.1 Analisis Pengguna
Pemakai atau user dari website pembelajaran ini yang akan dibangun terdiri dari dua pengguna, yaitu pada tabel 3.1:
46
Tabel 3.1 Tabel kualifikasi pengguna Nama Pengguna
Kualifikasi
Administrator Kualifikasi yang harus dimiliki petugas yaitu memiliki kemampuan dasar
di bidang komputer, dapat mengoperasikan Sistem Operasi Microsoft Windows 9x2000XP, memiliki pemahaman yang cukup dalam mengelola
data dalam web, memiliki pengetahuan tentang internet dan memiliki pemahaman tentang al-
qur’an. Pengunjung
Kualifikasi yang harus dimiliki member yaitu memiliki kemampuan dasar di bidang komputer, memiliki pengalaman browsing di internet.
3.1.3.2 Analisis perangkat keras
Dalam membangun web ini diperlukan alat pendukung perangkat keras hardware seperti pada tabel 3.2 berikut ini :
Tabel 3.2 Tabel perangkat keras Nama pengguna
Spesifikasi
Server a. Processor dengan kecepatan minimal 1 Ghz
b. RAM minimal 512 MB c. Hard Disk minimal 80 GB
d. VGA minimal 128 MB e. Monitor dengan resolusi 1024 x 768
f. Lan Card 10100 Mbps g. Koneksi Internet minimal 64 kbps.
Client a. Processor dengan kecepatan minimal 500 Mhz
b. RAM minimal 256 MB c. Hard Disk minimal 40 GB
d. VGA minimal 64 MB e. Monitor dengan resolusi 1024 x 768
47
f. Lan Card 10100 Mbps g. Koneksi Internet minimal 64 kbps.
3.1.3.3 Analisis perangkat lunak
Kebutuhan perangkat lunak merupakan faktor-faktor yang harus dipenuhi untuk merancang sebuah perangkat lunak sehingga perangkat lunak tersebut
sesuai dengan maksud dan tujuan perangkat lunak tersebut di buat. Beberapa perangkat lunak pendukung sebagai berikut :
1. Windows sebagai sistem operasi 2. Developer tool menggunakan PHP
3. MySQL versi 5. 4. DBMS menggunakan PHPMyAdmin
5. Web Server WAMP 5.1.7.2 6. Macromedia Dreamweaver Mx
7. Tool Antarmuka design Microsoft Visio 2003 8. Memakai fasilitas domain name yang gratis free yaitu www.co.cc
9. Hosting memakai www.000webhost.com
3.2 Perancangan Sistem
Perancangan sistem merupakan bagian dari metedologi penelitian pengembangan suatu perangkat lunak yang dilakukan setelah tahap analisis.
Perancangan bertujuan untuk memberikan gambaran secara terperinci. Perancangan sistem diharapkan dapat memecahkan permasalahan yang ada[1].
Tahapan ini menyangkut mengkonfirmasi dari komponen-komponen perangkat lunak dan perangkat keras dari suatu sistem sehingga setelah instalasi
48
dari sistem akan benar-benar memuaskan dari rancang bangun yang telah ditetapkan pada akhir tahap analisis sistem.
3.2.1 Perancangan proses
Pada perancangan proses ini bertujuan untuk menghasilkan perancangan sistem informasi yang berbasis komputer. Perancangan proses sistem ini meliputi
Diagram Konteks, Data Flow Diagram, dan Spesifikasi proses yang berfungsi untuk menjelaskan aliran data yang diproses sehingga dapat menghasilkan
informasi yang diharapkan.
3.2.1.1 Diagram Konteks
Untuk membatasi sistem yang menunjukan adanya interaksi sistem dengan komponen luar sistem maka perlu dibuat diagram konteks yang merupakan suatu
diagram yang menggambarkan sistem dalam satu lingkungan dan hubungan dengan entitas luar. Diagram konteks dari sistem yang diusulkan yaitu :
Website Pembelajaran Tahap
Dasar Membaca Al-
Qur’an Admin
Pengguna
Dt login Dt user
Dt kategori materi Dt materi
Dt latihan
Login invalid Info user
Info kategori mater Info materi
Info latihan Pilih Materi
Pilih Latihan
Info materi Info latihan
Gambar 3.3 Diagram Konteks Website Pembelajaran Tahap Dasar Membaca Al- qur’an
49
3.2.1.2 Data flow diagram
Data alir diagram atau DFD adalah suatu model logika data atau proses yang dibuat untuk menggambarkan dari mana asal data dan kemana tujuan data yang
keluar, dimana data disimpan, proses apa yang dihasilkan data tersebut.
3.2.1.2.1 DFD level 0
Pada DFD level 0 ini dijelaskan alir diagram secara keseluruhan pada sistem yang akan dibangun, mulai dari data master dan login. Kemudian siapa yang
mengolah atau menggunakannya, semuanya digambarkan pada level 0 seperti terlihat pada gambar 3.4 berikut ini:
1.0 Login
2.0 Pengelolaan
User
3.0 Pengelolaan
Materi
4.0 Pengelolaan
Latihan Admin
T_user Login invalid
Dt login admin Dt user
Info dt user
Info dt user Dt user
Login admin valid Tambah user
Hapus user Info dt user
Login admin valid Tambah Materi
Hapus Materi Ubah Materi
Info materi
Info latihan T_materi
T_latihan T_kategori materi
5.0 Pilih Materi
Penguna D
t ka te
g o
ri m a
te ri
In fo
kate go
ri m
ate ri
In fo
k ate
go ri m
ate ri
Dt kategori materi
info m
a te
ri Dt materi
Info materi D
t m ate
ri
Info latihan Dt latihan
6.0 Pilih Latihan
Info dt kategori materi
Info dt materi Dt kateori materi
In fo
d t k
ate g
o ri m
a te
ri In
fo d
t m
ate ri
Info dt latihan Dt latihan
Info materi Dt materi
Info latihan Dt latihan
Login admin valid Tambah Latihan
Hapus Latihan Ubah Latihan
Lo g
in V
al id
Lo gi
n V
al id
L og
in V
al id
Gambar 3.4 DFD level 0
3.2.1.2.2 DFD Level 1 Proses 1.0 login
DFD level 1 proses 1.0 yaitu proses login menjelaskan bagaimana alir login admin, jika data login user sesuai maka user akan masuk ke dalam proses lainnya,
tetapi jika data login tidak sesuai maka sistem akan memberikan info invalid ke pada user, seperti digambarkan pada gambar 3.5 berikut ini:
50
1.1 Verifikasi user
name
1.2 Verifikasi
password Admin
T_user Dt login admin
Dt login invalid
In fo
d t
u se
r
In fo
d t u
se r
Login valid
Gambar 3.5 DFD level 1 proses 1.0 login
3.2.1.2.3 DFD Level 1 Proses 2.0 User
DFD level 1 proses 1 proses 2.0 user, menggambarkan pengolahan data user,admin dapat menambah, mengubah dan menghapus user, seperti terlihat pada
gambar 3.6 berikut ini:
51
2.1 Menambah
user
2.2 Menghapus
user T_user
Dt user Info Dt user
Info Dt user Dt user
Dt user Info Dt user
Dt user Info Dt user
Admin
Gambar 3.6 DFD level 1 proses 2.0 User
3.2.1.2.4 DFD Level 1 Proses 3.0 pengelolaan data materi
DFD level 1 proses 3.0 pengolahan data materi menggambarkan data-data apa saja yang ada yang dapat diakses dan dikelola oleh siapa saja dalam pengelolaan
data materi seperti terlihat pada gambar 3.7 berikut ini:
Admin 3.1
Menambah Materi
3.2 Menghapus
Materi
3.3 Mengubah
Materi T_kategori
materi T_materi
Dt materi Info materi
Info materi
Dt materi
Info materi Dt materi
Info kategori materi Dt kategori materi
Info materi
Dt materi Info kategori materi
Dt kategori materi Info materi
Dt materi
Info kategori materi Dt materi
Info materi Dt materi
Gambar 3.7 DFD level 1 proses 3 pengelolaan data materi
52
3.2.1.2.5 DFD Level 1 Proses 4.0 pengelolaan data latihan
DFD level 1 proses 4.0 pengolahan data latihan menggambarkan data-data apa saja yang ada yang dapat diakses dan dikelola oleh siapa saja dalam
pengelolaan data latihan seperti terlihat pada gambar 3.8 berikut ini:
Admin 4.1
Menambah Latihan
4.2 Menghapus
Latihan T_latihan
Dt latihan Info latihan
Info latihan
Dt latihan Info latihan
Dt latihan
Info latihan
Dt latihan
4.3 Mengubah
Latihan Info latihan
Dt latihan Info latihan
Dt latihan
Gambar 3.8 DFD level 1 proses 4 pengelolaan data latihan
3.2.1.2.6 DFD Level 1 proses 5.0 pilih pembelajaran
DFD level 1 proses 5.0 pilih pembelajaran menggambarkan data-data apa saja yang ada yang dapat diakses dan dikelola oleh siapa saja dalam pilih pembelajaran
seperti terlihat pada gambar 3.9 berikut ini:
53
Pengguna T_latihan
5.1 Pilih
Materi
5.2 Pilih
Latihan T_materi
data_latihan info_latihan
info_latihan data_materi
info_materi info_materi
T_kategori info_kategori
info_kategori
Gambar 3.9 DFD level 1 proses 5 pilih pembelajaran
3.2.1.2.7 DFD Level 2 Proses 5.1 Pilih Materi
DFD level 2 proses 5.1 Pilih Materi, menjelaskan proses pemilihan materi apa saja yang dapat dilakukan oleh pengguna , berikut dapat dilihat penjelasannya
pada gambar 3.10 berikut ini:
54
Pengguna 5.1.1
Materi Huruf Hijaiyah
5.1.2 Materi
Mad
5.1.3 Materi
Qalqalah
T_kategori materi T_materi
5.1.4 Materi
Idhar
5.1.5 Materi
Idgham
5.1.6 Materi
Ikhfa
5.1.7 Materi
Iqlab Info materi
Pilih materi Info materi
Pilih materi Info materi
Pilih materi Info materi
Pilih materi
Pilih materi Info materi
Pilih materi Info materi
Pilih materi Info materi
Info kategori materi Info dt materi
Info kategori materi Info dt materi
Info kategori materi
Info kategori materi
Info kategori materi Info dt materi
Info dt materi
Info dt materi
Info kategori materi
Info kategori materi Info dt materi
Info dt materi
Gambar 3.10 DFD level 2 proses 5.1 Pilih Materi
3.2.1.2.8 DFD Level 2 Proses 5.2 Pilih Latihan
DFD level 2 proses 5.2 Pilih Latihan, menjelaskan proses pemilihan Latihan apa saja yang dapat dilakukan oleh pengguna , berikut dapat dilihat penjelasannya
pada gambar 3.11 berikut ini:
55
Pengguna 5.2.1
Latihan Huruf Hijaiyah
5.2.2 Latihan
Mad
5.2.3 Latihan
Qalqalah
T_latihan 5.2.4
Latihan Idhar
5.2.5 Latihan
Idgham
5.2.6 Latihan
Ikhfa
5.2.7 latihan
Iqlab Info latihan
Pilih latihan
Info latihan Pilih latihan
Info latihan Pilih latihan
Info latihan Pilih latihan
Pilih latihan Info latihan
Pilih latihan Info latihan
Pilih latihan Info latihan
Info latihan
Info latihan
Info latihan
Info latihan
Info latihan
Info latihan
Info latihan
Gambar 3.11 DFD level 2 proses 5.2 Pilih Latihan
3.2.1.3 Spesifikasi Proses
Spesifikasi proses merupakan alat bantu tools sistem yang akan menjelaskan perilaku-perilaku proses yang ada dalam diagram aliran data.
56
Tabel 3.3 Spesifikasi Proses
No. Proses
Keterangan
1. No. Proses 1.1
Nama Proses Verifikasi User ID
Source Admin
Input Data Login
Output Informasi Login Invalid
Destination Admin
Logika Proses Begin
{Admin memasukkan user name } if
username ada then
username valid
else
tampil informasi login invalid
end
2. No. Proses 1.2
Nama Proses Verifikasi Password
Source Admin
Input Data Login
Output Informasi Login Invalid
Destination Admin
Logika Proses
Begin
{ Admin memasukkan password } if
password ada then
login valid
else
tampil informasi login invalid
end
3. No. Proses 2.1
Nama Proses Menambah data user
Source Admin
Input Data user
Output Informasi data user
Destination Admin
Logika Proses
Begin
{Admin menambah data user pada menu Menambah data user}
if data user diisi and tidak ada data kosong then
simpan data yang ditambah
else
data tidak jadi ditambahkan
end
4. No. Proses 2.2
Nama Proses Menghapus data user
Source Admin
57
Input Data user yang akan dihapus
Output Informasi data user yang telah dihapus
Destination Admin
Logika Proses
Begin
{Admin melihat data user yang akan dihapus pada menu hapus data user}
if data user yang akan dihapus ada and user tidak
sedang online then
hapus data user
else
data user tidak jadi dihapus
end
5. No. Proses 3.1
Nama Proses Menambah materi
Source Admin
Input Materi yang akan ditambah
Output Informasi materi yang akan ditambah
Destination Admin
Logika Proses Begin
{admin menambah latihan pada menu menambah materi }
if materi diisi and tidak ada data kosong then
simpan data yang ditambah
else
data tidak jadi ditambahkan
end
6. No. Proses 3.2
Nama Proses Menghapus materi
Source Admin
Input Materi yang akan dihapus
Output Informasi materi yang telah dihapus
Destination Admin
Logika Proses Begin
{admin melihat data materi yang akan dihapus pada menu menghapus materi}
if data materi yang akan dihapus ada then
hapus data materi
else
data tidak jadi dihapus
end
7. No. Proses 3.3
Nama Proses Mengubah materi
Source Admin
Input Data materi yang akan diubah
Output Informasi data materi yang yang telah diubah
58
Destination Admin
Logika Proses Begin
{admin mengubah materi pada menu mengubah materi}
if materi benar and tidak ada data kosong then
simpan hasil perubahan
else
perubahan data tidak berhasil
end
8. No. Proses 4.1
Nama Proses Menambah latihan
Source Admin
Input Latihan yang akan ditambah
Output Informasi latihan yang akan ditambah
Destination Admin
Logika Proses
Begin
{admin menambah latihan pada menu menambah latihan}
if latihan diisi and tidak ada data kosong then
simpan data yang ditambah
else
data tidak jadi ditambahkan
end
10. No. Proses 4.2
Nama Proses Menghapus latihan
Source Admin
Input latihan yang akan dihapus
Output Informasi latihan yang telah dihapus
Destination Admin
Logika Proses Begin
{admin melihat data latihan yang akan dihapus pada menu menghapus latihan}
if data latihan yang akan dihapus ada then
hapus data latihan
else
data tidak jadi dihapus
end
11. No. Proses 5.1
Nama Proses Pilih Materi
Source Pengguna
Input Data materi yang dipilih
Output Informasi data materi yang dipilih
Destination Pengguna
Logika Proses Begin
{pengguna memilih data materi }
59
if materi dipilih then
tampil data materi yang dipilih
else
informasi data yang dipilih tidak ada
end
12. No. Proses 5.2
Nama Proses Pilih Latihan
Source Pengguna
Input Data latihan yang dipilih
Output Informasi data latihan yang dipilih
Destination Pengguna
Logika Proses Begin
{pengguna memilih data latihan } if
latihan dipilih then
tampil data latihan yang dipilih
else
informasi data yang dipilih tidak ada
end
3.2.1.4 Kamus Data
Kamus data merupakan deskripsi formal mengenai seluruh elemen yang tercakup dalam DFD.
Tabel 3.4 kamus data DFD
Nama Data Login
Where usedhow used Admin
– proses 1.0 Deskripsi
Berisi data login Struktur data
Username+Password Username
Password {A...Z|a...z}
{A...Z|a...z|0...9} Nama
Data user
Where usedhow used Admin proses
– Proses 2.0 Deskripsi
Berisi data user Struktur data
Username+Password Username
Password {A...Z|a...z|0...9}
{A...Z|a...z|0...9} Nama
Data Materi
Where usedhow used Admin
– proses 3.0 Deskripsi
Berisi data materi Struktur data
Id materi + id_kategorimateri + latin + gambar + suara + username + deskripsi
Id materi Id_kategorimateri
Latin Gambar
Suara [0...9]
[0...9] {A...Z|a...z}
[jpg | gif] [mp3]
60
Username deskripsi
{A...Z|a...z} {A...Z|a...z|0...9}
Nama Data Latihan
Where usedhow used Admin
– proses 4.0 Deskripsi
Berisi data latihan Struktur data
Id latihan + id materi + soal + jenis + urutan Id latihan
Id materi Soal
Jenis urutan
[0...9] [0...9]
{A...Z|a...z} {A...Z|a...z}
[0...9]
Nama Pilih Materi
Where usedhow used User
– proses 5.1 Deskripsi
Berisi pilihan dari materi yang akan di kerjakan Struktur data
Id materi + id_kategorimateri + latin + gambar + suara + deskripsi
Id materi Id_kategorimateri
Latin Gambar
Suara deskripsi
[0...9] [0...9]
{A...Z|a...z} [jpg | gif]
[mp3] {A...Z|a...z|0...9}
Nama Pilih Latihan
Where usedhow used User
– proses 5.2 Deskripsi
Berisi pilihan dari latihan yang akan di tampilkan Struktur data
Id latihan + id materi + soal + jenis + urutan Id latihan
Id materi Soal
Jenis urutan
[0...9] [0...9]
{A...Z|a...z} {A...Z|a...z}
[0...9]
Nama Tambah Data user
Where usedhow used Admin
– proses 2.1 Deskripsi
Admin dapat menambah admin baru Struktur data
User id+password Username
password {A...Z|a...z|0...9}
{A...Z|a...z|0...9} Nama
Hapus data user
Where usedhow used Admin
– proses 2.2 Deskripsi
Admin dapat menghapus data admin Struktur data
User id+password Username
Password {A...Z|a...z|0...9}
{A...Z|a...z|0...9} Nama
Tambah latihan
Where usedhow used Admin - proses 4.1
Deskripsi Admin dapat menambah soal latihan
Struktur data Id latihan + id materi + soal + jenis + urutan
Id latihan Id materi
Soal Jenis
urutan [0...9]
[0...9] {A...Z|a...z}
{A...Z|a...z} [0...9]
Nama Hapus latihan
Where usedhow used Admin
– proses 4.2
61
Deskripsi Admin dapat menghapus soal latihan
Struktur data Id latihan + id materi + soal + jenis + urutan
Id latihan Id materi
Soal Jenis
urutan [0...9]
[0...9] {A...Z|a...z}
{A...Z|a...z} [0...9]
Nama Tambah data materi
Where usedhow used Admin
– proses 3.1 Deskripsi
Admin dapat menambah materi Struktur data
Id materi + id_kategorimateri + latin + gambar + suara + username + deskripsi
Id materi Id_kategorimateri
Latin Gambar
Suara Username
deskripsi [0...9]
[0...9] {A...Z|a...z}
[jpg | gif] [mp3]
{A...Z|a...z} {A...Z|a...z|0...9}
Nama Ubah data materi
Where usedhow used Admin
– proses 3.2 Deskripsi
Admin dapat mengubah materi Struktur data
Id materi + id_kategorimateri + latin + gambar + suara + username + deskripsi
Id materi Id_kategorimateri
Latin Gambar
Suara Username
deskripsi [0...9]
[0...9] {A...Z|a...z}
[jpg | gif] [mp3]
{A...Z|a...z} {A...Z|a...z|0...9}
Nama Hapus data materi
Where usedhow used Admin
– proses 3.3 Deskripsi
Admin dapat menghapus materi Struktur data
Id materi + id_kategorimateri + latin + gambar + suara + username + deskripsi
Id materi Id_kategorimateri
Latin Gambar
Suara Username
deskripsi [0...9]
[0...9] {A...Z|a...z}
[jpg | gif] [mp3]
{A...Z|a...z} {A...Z|a...z|0...9}
3.2.2 Perancangan basis data
3.2.2.1 ERD Entity Relationship Diagram
ERD digunakan dalam membangun basisdata untuk menggambarkan relasi atau hubungan dari dua file atau dua tabel. ERD terdiri dari 2 komponen utama
62
yaitu entitas dan relasi. Kedua komponen tersebut dideskripsikan lebih jauh melalui atribut
–atribut atau properti. Hubungan antar entitas yang terjadi dalam web pembelajaran tahap dasar
membaca al- qur’an ini dapat dilihat pada Entity Relationship Diagram berikut ini
Admin Materi
Latihan Mengelola
Memiliki Memiliki
Kategori Id_kategori
Jawaban Memiliki
1 N
N 1
N kategori
deskripsi
Id_kategori
gambar Id_materi
latin suara
username deskripsi
username
password
Id_kategori Id_latihan
soal jenis
Id_materi Id_latihan
jawaban 1
1 Memiliki
Soal Id_latihan
Id_kategori soal_jawab
bahan date
username 1
1 N
1 1
Memiliki
Gambar 3.12 ERD
3.2.2.2 Kamus Data ERD
Tabel 3.5 kamus data ERD
Entitas Atribut
Admin Username + Password
Materi Id materi + id_kategori+ latin + gambar + suara+
username + deskripsi
Kategori Id kategor + kategori + deskripsi
Latihan Id latihan + Id_materi + Id_kategori +soal + jenis
Jawaban Id_latihan + jawaban
Soal Id_soal + Id_kategori + soal_jawab + bahan + date +
username
63
3.2.2.3 Skema Relasi
Proses relasi antar file merupakan gabungan antar file yang mempunyai kunci utama yang sama, sehingga file-file tersebut menjadi satu kesatuan yang
dihubungkan oleh field kunci tersebut. Pada proses ini elemen-elemen data dikelompokkan menjadi satu file database beserta entitas dan hubungannya.
Kategori
PK id_kategori
kategori deskripsi
User
PK user_name
password
Materi
PK id_materi
id_kategorii latin
gambar suara
user_name deskripsi
Latihan
PK id_latihan
id_materi id_kategori
jenis soal
Jawaban id_latihan
jawaban
1 1
1 1
N
N N
soal
PK id_soal
id_kategori soal_jawab
bahan date
user_name
N 1
1 1
1
Gambar 3.13 Skema Relasi
3.2.2.4 Struktur Tabel
Tabel 3.6 User
Nama Kolom Tipe Data
Keterangan Tambahan username
varchar [10] primary key
Password varchar [32]
Not null default
64
Tabel 3.7 Materi
Nama Kolom Tipe Data
Keterangan Tambahan Id materi
Varchar [10] primary key
Id Kategori materi Text
Not null default, foreign key Kategori Id_Kategori
Latin Varchar [10]
Not null default Gambar
Varchar [10] Not null default
suara Varchar [10]
Null deskripsi
Text Null
username Varchar [10]
Not null default, foreign key User username
Tabel 3.8 Latihan
Nama Kolom Tipe Data
Keterangan Tambahan Id latihan
Varchar [10] primary key
Id Materi Varchar [10]
Not null default, foreign key materi Id_Materi
Soal Text
Not null default Jenis
Int [1] Not null default
urutan Int [11]
Not null
Tabel 3.9 kategori materi
Nama Kolom Tipe Data
Keterangan Tambahan Id kategori materi
Varchar [10] primary key
Kategori Varchar [30]
Not null default deskripsi
Text Null
Tabel 3.10 Jawaban
Nama Kolom Tipe Data
Keterangan Tambahan Id_latihan
BigInt [13] Not null, foreign key latihan
id_latihan Jawaban
varchar [30] Not null
Tabel 3.11 Soal
Nama Kolom Tipe Data
Keterangan Tambahan Id_soal
Varchar [16] primary key , foreign key
latihan id_latihan Id_kategori
Int [2] Not null
Soal_jawab Varchar [100]
Not null Bahan
Varchar [255] Null default
Date Datetime
Null default Username
Varchar [100] Null default
65
3.3 Perancangan Arsitektur
Perancangan arstitektur merupakan hubungan di antara elemen-elemen struktural utama dari program. Perancangan arsitektur dapat memberikan
gambaran mengenai struktur program.
3.3.1 Perancangan struktur menu
Berikut adalah perancangan struktur menu web pembelajaran tahap dasar membaca alqu
r’an :
a. Struktur menu Administrator
Menu utama Login
Admin Mengelola
Pengguna Tambah
Hapus Mengelola Materi
Tambah Ubah
Hapus Mengelola Latihan
Tambah Ubah
Hapus
Gambar 3.14 Struktur menu administrator
66
b. Struktur menu Pengunjung
Menu pengguna
Home
Huruf hijaiyah
Huruf Mad
Qalqalah
izhar
latihan iqlab
idgham
ikhfaa Pengguna
Lihat
Lihat
Lihat
Lihat
Lihat
Lihat
Lihat
Lihat
Lihat
Gambar 3.15 Struktur menu pengunjung
3.3.2 Perancangan Antarmuka
Bagian dari perancangan sistem e-learning ini adalah perancangan antarmuka untuk pengguna. Antarmuka menghubungkan pengguna dengan
67
sistem, jadi peranannya sangat penting. Perancangan antarmuka situs secara umum dapat dilihat pada Gambar dibawah :
T01
Selamat Datang
Home Huruf
Hijaiyah Mad
T01
Home Qalqalah
Idzhar Idgham
Iqlab Ikhfaa
Latihan
Keterangan : Nama Form
: T01 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Home akan menuju ke T01
Klik Huruf Hijaiyah akan menuju ke T02
Klik Mad akan menuju ke T03
Klik Qalqalah akan menuju ke T04
Klik Idzhar akan menuju ke T05
Klik Idgham akan menuju ke T06
Klik Iqlab akan menuju ke T07
Klik Ikhfa akan menuju ke T08
Klik Latihan akan menuju ke T09
Gambar 3.16 tampilan menu utama pengguna
Mad
T02
Home Qalqalah
Idzhar Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
No Bahasa
Nama Materi Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T02 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T02A
Gambar 3.17 tampilan menu materi huruf hijaiyah Sebelum Sound Di klik
68
Mad
T02A
Home Qalqalah
Idzhar Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
No Bahasa
Nama Materi Sound
Gambar Huruf Hijaiyah dan Deskripsinya
Keterangan : Nama Form
: T02A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Huruf Hijaiyah dan deskripsinya
Contoh suara Pengucapan
Gambar 3.18 tampilan menu materi huruf hijaiyah Setelah Sound Di klik
T03
Home Qalqalah
Idzhar Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
Nama Materi Mad
Deskripsi Materi No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T03 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T03A
Gambar 3.19 tampilan menu materi Mad Sebelum Sound Di klik
T03A
Home Qalqalah
Idzhar Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
Nama Materi Mad
Deskripsi Materi No
Bahasa Sound
Gambar Contoh Mad dan Deskripsinya
Keterangan : Nama Form
: T03A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Mad dan deskripsinya
Contoh suara Pengucapan
Gambar 3.20 tampilan menu materi Mad Setelah Sound Di klik
69
T04
Home Idzhar
Idgham Iqlab
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T04 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T04A
Gambar 3.21 tampilan menu materi qalqalah Sebelum Sound Di klik
T04A
Home Idzhar
Idgham Iqlab
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah No
Bahasa Sound
Gambar Contoh Qalqalah dan Deskripsinya
Keterangan : Nama Form
: T04A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Qalqalah dan deskripsinya
Contoh suara Pengucapan
Gambar 3.22 tampilan menu materi qalqalah Setelah Sound Di klik
T05
Home Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
Nama Materi Mad
Deskripsi Materi Qalqalah
Idzhar No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T05 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T05A
Gambar 3.23 tampilan menu materi Idzhar Sebelum Sound Di klik
70
T05A
Home Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
Nama Materi Mad
Deskripsi Materi Qalqalah
Idzhar No
Bahasa Sound
Gambar Contoh Idzhar dan Deskripsinya
Keterangan : Nama Form
: T05A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Idzhar dan deskripsinya
Contoh suara Pengucapan
Gambar 3.24 tampilan menu materi idzhar setelah Sound Di klik
T06
Home Iqlab
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Idgham No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T06 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T06A
Gambar 3.25 tampilan menu materi Idghom Sebelum Sound Di klik
T06A
Home Iqlab
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Idgham No
Bahasa Sound
Gambar Contoh Idgham dan Deskripsinya
Keterangan : Nama Form
: T06A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Idgham dan deskripsinya
Contoh suara Pengucapan
Gambar 3.26 tampilan menu materi idghom Seetelah Sound Di klik
71
T07
Home Idgham
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Iqlab No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T07 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T07A
Gambar 3.27 tampilan menu materi Iqlab Sebelum Sound Di klik
T07A
Home Idgham
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Iqlab
Keterangan : Nama Form
: T07A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
No Bahasa
Sound Gambar Contoh Iqlab dan
Deskripsinya Gambar Contoh Iqlab dan
deskripsinya Contoh suara Pengucapan
Gambar 3.28 tampilan menu materi Iqlab Setelah Sound Di klik
T08
Home Idgham
Iqlab Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Ikhfaa No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T08 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T08A
Gambar 3.29 tampilan menu materi Ikhfa Sebelum Sound Di klik
72
T08A
Home Idgham
Iqlab Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Ikhfaa No
Bahasa Sound
Gambar Contoh Ikhfa dan Deskripsinya
Keterangan : Nama Form
: T08A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Ikhfa dan deskripsinya
Contoh suara Pengucapan
Gambar 3.30 tampilan menu materi Ikhfa Setelah Sound Di klik
T09
Home Idgham
Iqlab Ikhfaa
Huruf Hijaiyah Mad
Qalqalah Idzhar
Latihan Petunjuk
Mulai Latihan
Keterangan : Nama Form
: T09 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Mulai Latihan akan menuju ke T09A
Gambar 3.31 tampilan menu awal latihan
T09A
Home Idgham
Iqlab Ikhfaa
Huruf Hijaiyah Mad
Qalqalah Idzhar
Latihan Latihan
Lanjutkan
Keterangan : Nama Form
: T09A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Mulai Latihan akan menuju ke T09A
Klik Lanjutkan akan menuju soal berikutnya
Soal Jawaban
Gambar 3.32 tampilan menu latihan
73
T010
Nama Password
Log in
Keterangan : Nama Form
: T010 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Log in akan menuju ke T011
Gambar 3.33 tampilan menu login
T011
Pengguna Materi
Latihan Halaman utama
Selamat Datang Halaman utama
Keluar
Keterangan : Nama Form
: T011 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Halaman utama akan menuju ke T011
Klik Pengguna akan menuju ke T012
Klik Materi akan menuju ke T012
Klik Latihan akan menuju ke T012
Klik Keluar akan menuju ke T01
Gambar 3.34 tampilan halaman utama admin
T012
Materi Latihan
Halaman utama Keluar
Pengguna
Tambahkan Username
No Hapus
Lock User name
Password
Keterangan : Nama Form
: T012 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Tambahkan maka akan menuju T012 user
bertambah Klik Hapus maka akan
menuju T012 User berkurang
Lock = Admin yang sedang login tidak bisa di
hapus
Gambar 3.35 tampilan menu Pengolahan Pengguna Admin
74
T013
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Tambah Materi maka akan menuju ke T013
Klik Hijaiyah Maka Akan menuju ke T013A
Klik Mad Maka Akan menuju ke T013B
Klik Qalqalah Maka Akan menuju ke T013C
Klik Izhar Maka Akan menuju ke T013D
Klik Idghom Maka Akan menuju ke T013E
Klik Ikhfa Maka Akan menuju ke T013F
Klik Iqlab Maka Akan menuju ke T013G
Kategori Latin
Suara Gambar
Browse Browse
Text Editor
Gambar 3.36 tampilan menu tambah materi
T013A
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Hijaiyah Maka Akan menuju ke T013A
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.37 tampilan menu hapus dan ubah materi hijaiyah
75
T013B
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013B Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Hijaiyah Maka Akan menuju ke T013B
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.38 tampilan menu hapus dan ubah materi mad
T013C
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013C Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Qalqalah Maka Akan menuju ke T013C
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.39 tampilan menu hapus dan ubah materi qalqalah
76
T013D
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013D Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Izhar Maka Akan menuju ke T013D
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.40 tampilan menu hapus dan ubah materi izhar
T013E
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013E Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Idghom Maka Akan menuju ke T013E
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.41 tampilan menu hapus dan ubah materi Idghom
77
T013F
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013F Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Ikhfa Maka Akan menuju ke T013F
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.42 tampilan menu hapus dan ubah Ikhfa
T013G
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013G Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Iqlab Maka Akan menuju ke T013G
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.43 tampilan menu hapus dan ubah materi Iqlab
78
T014
Latihan Halaman utama
Keluar Pengguna
Tambah Soal Soal Latihan
Materi
No Soal
Kategori Urutan
Hapus Hapus
Keterangan : Nama Form
: T014 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Tambah Soal maka akan menuju T015
Klik Soal Latihan maka akan menuju T014
Gambar 3.44 tampilan menu soal latihan
T015
Latihan Halaman utama
Keluar Pengguna
Tambah Soal Soal Latihan
Materi
Keterangan : Nama Form
: T015 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Pilih Materi yang akan menjadi soal
Materi
Gambar 3.45 tampilan menu Tambah Soal
79
3.3.3 Jaringan Semantik Admin
T010 T011
T012 T013
T014
T015 T013C
T013D T013E
T013F T013G
T013B
T013A
Gambar 3.46 jaringan semantik untuk Admin
3.3.4 Jaringan Semantik Pengguna
T01
T02 T03
T04 T05
T06
T07 T08
T09 T02A
T09A T08A
T07A T06A
T05A T04A
T03A
Gambar 3.47 jaringan semantik untuk Pengunjung
80
BAB IV IMPLEMENTASI
DAN PENGUJIAN
4.1 Implementasi
Pada bab ini akan dilakukan implementasi dan pengujian terhadap aplikasi web ini yang di lakukan secara online dengan webhosting. Tahapan ini dilakukan
setelah perancangan selesai dilakukan dan selanjutnya akan diimplementasikan kedalam bahasa pemograman. Setelah implementasi maka dilakukan pengujian
terhadap aplikasi web yang baru dan akan dilihat kekurangan-kekurangan pada aplikasi web yang baru untuk pengembangan sistem selanjutnya.
4.1.1 Implementasi Perangkat Lunak
Spesifikasi perangkat lunak yang digunakan dalam membangun Website Pembelajaran Tahap Dasar Membaca Al-
qur’an ini adalah sebagai berikut:
Tabel 4.1 Perangkat Lunak yang digunakan
No Perangkat Lunak
Keterangan 1
Sistem Operasi Windows XP Profesional SP II
2 Bahasa Pemograman
PHP 5.2.10 3
Web Server Apache Ver. 2.2.13 Unix
4 Database Server
MySQL 5.0.81-community 5
Web Browser Internet Explore
6 Code Editor
Macromedia dreamweaver 8 7
Image Editor Adobe Photoshop CS
8 DFD Modeler
Visio 2007
4.1.2 Implementasi Perangkat Keras
Spesifikasi perangkat keras yang digunakan dalam pembangunan perangkat keras adalah tercantum pada tabel 4.2 sebagai berikut :
Tabel 4.2 Perangkat keras yang digunakan
Perangkat Server
Client Processor
Kecepatan 1 GHz Kecepatan 500 MHz
RAM 1 GHz
512 GHz Harddisk
80 Gb 80 Gb
Monitor Resolusi 1024 x 768
Resolusi 1024 x 768 VGA
128 Mb 128 Mb
Lan Card 10100 Mbps
10100 Mbps Koneksi Internet
64 Kbps 64 Kbps
4.1.3 Implementasi Basis Data
Pembuatan basis data dilakukan dengan menggunakan MySQL . Implementasi basis data dalam bahasa SQL adalah sebagai berikut :
Pembuatan Database :
Tabel 4.3 Implementasi database Tabel Materi
Tabel Latihan
CREATE TABLE IF NOT EXISTS `materi` `id_materi` int5 NOT NULL AUTO_INCREMENT,
`id_kategori` int2 NOT NULL DEFAULT 0, `latin` varchar25 NOT NULL,
`gambar` varchar255 NOT NULL, `suara` varchar255 DEFAULT NULL,
`deskripsi` text, `username` varchar25 NOT NULL,
PRIMARY KEY `id_materi`, KEY `id_kategori` `id_kategori`,
KEY `username` `username` ENGINE=MyISAM DEFAULT CHARSET=latin1
AUTO_INCREMENT=19 ; CREATE TABLE IF NOT EXISTS `latihan`
`id_latihan` varchar12 NOT NULL, `id_materi` int5 NOT NULL DEFAULT 0,
`id_kategori` int4 NOT NULL, `jenis` int1 NOT NULL DEFAULT 0,
`soal` text NOT NULL, PRIMARY KEY `id_latihan`,
KEY `id_materi` `id_materi`, KEY `id_kategori` `id_kategori`
ENGINE=MyISAM DEFAULT CHARSET=latin1;
Tabel Kategori Tabel Tabel User
CREATE TABLE IF NOT EXISTS `kategori` `id_kategori` int2 NOT NULL DEFAULT 0,
`kategori` varchar30 NOT NULL, `deskripsi` text,
PRIMARY KEY `id_kategori` ENGINE=MyISAM DEFAULT CHARSET=latin1;
CREATE TABLE IF NOT EXISTS `user` `username` varchar25 NOT NULL,
`password` varchar32 NOT NULL, PRIMARY KEY `username`
ENGINE=MyISAM DEFAULT CHARSET=latin1;
Tabel Jawaban Tabel Soal
CREATE TABLE IF NOT EXISTS `jawaban` `id_latihan` bigint13 NOT NULL,
`jawaban` varchar30 NOT NULL, KEY `id_latihan` `id_latihan`
ENGINE=MyISAM DEFAULT CHARSET=latin1; CREATE TABLE IF NOT EXISTS `soal`
`id_soal` varchar16 NOT NULL, `id_kategori` int2 NOT NULL,
`soal_jawab` varchar100 NOT NULL, `bahan` varchar255 DEFAULT NULL,
`date` datetime DEFAULT NULL, `username` varchar100 DEFAULT NULL,
PRIMARY KEY `id_soal`, KEY `id_kategori` `id_kategori`
ENGINE=MyISAM DEFAULT CHARSET=latin1;
4.1.4 Implementasi Antarmuka
Implementasi antarmuka sistem terlampir, sedangkan untuk implementasi form yang terdapat pada aplikasi yang ditujukan untuk pengguna, dalam hal ini
Administrator, Pimpinan, Sekretaris yang dibuat dalam bentuk file program dengan berekstensi .PHP dapat dilihat pada tabel 4.4 berikut :
Tabel 4.4 Implementasi Antar Muka No Menu
Deskripsi Nama File
Hal Lampiran
1 Login
Login sebagai admin home.php
A – 1
2 Logout
Keluar dari menu admin, petugas dan
member dan kembali ke menu login
logout.php A
– 8 3
Pengguna Untuk mengelola data
admin pengguna users.php
A – 1
4 Materi
Untuk mengelola data materi
materi.php A
– 1 5
Latihan Untuk mengelola data
latihan latihan.php
A – 2
6 Tambah
Pengguna Menambahkan
Pengguna Admin users1.php
A – 1
7 Hapus
Pengguna Menghapus Pengguna
Admin
users2.php A
– 1 8
Tambah Materi Menambahkan materi
Ke kategori materi1.php,materi2.php,materi
3.php,materi4.php,materi5.php A
– 1 9
Ubah Materi Mengubah materi dari
tiap kategori edit1.php,edit2.php,edit3.php,
edit4.php,edit5.php A
– 2 10 Hapus Materi
Menghapus materi r11.php
A – 2
11 Tambah Latihan Menambahkan soal
latihan Add.php
A – 2
12 Soal Latihan
Menampilkan soal latihan yang telah
ditambahkan latihan.php
A – 3
13 Home
Tampilan Awal Web untuk pengunjung
index.php A
– 3 14
Huruf Hijaiyah Menampilkan materi
huruf hijaiyah m1.php
A – 4
15 Mad
Menampilkan materi Mad
m2.php A
– 4 16
Qalqalah Menampilkan materi
qalqalah m3.php
A – 5
17 Izhar
Menampilkan materi izhar
m4.php A
– 5 18
Idgham Menampilkan materi
idgham m5.php
A – 6
19 Iqlab
Menampilkan materi iqlab
m6.php A
– 6 20
Ikhfa Menampilkan materi
m7.php A
– 7
ikhfa 21
Latihan Menampilkan latihan
soal m9.php
A – 7
4.2 Pengujian Perangkat lunakSistem
Pengujian sistem merupakan hal terpenting yang bertujuan untuk menemukan kesalahan
– kesalahan atau kekurangan – kekurangan pada perangkat lunak yang diuji. Pengujian bermaksud untuk mengetahui perangkat lunak yang dibuat sudah
memenuhi kriteria yang sesuai dengan tujuan perancangan perangkat lunak tersebut atau tidak.
Pengujian aplikasi web ini menggunakan pengujian black box. Pengujian black box berfokus pada persyaratan fungsional perangkat lunak.
4.2.1 Pengujian Alpha
Pengujian dilakukan terhadap 2 aspek yaitu aspek fungsionalitas dan aspek penanganan kesalahan.
4.2.2 Lingkungan Pengujian
Pengujian dilakukan menggunakan sistem operasi Microsoft Windows XP Professional.
4.2.3 Skenario Pengujian
Tabel 4.5 menjelaskan skenario pengujian alpha pada web Kelas Uji
Butir Uji Jenis Pengujian
Login Verifikasi username
Black Box Verifikasi password
Black Box Logout
Menghapus session user Black Box
Pengolahan User Tambah Pengguna admin
Black Box Hapus Pengguna admin
Black Box Pengolahan Materi
Tambah Materi Black Box
Hapus Materi Black Box
Ubah Materi Black Box
Pengolahan Latihan Tambah Soal Latihan
Black Box Hapus Soal Latihan
Black Box
Memilih Materi Materi Huruf Hijaiyah
Black Box Materi Mad
Black Box Materi Qalqalah
Black Box Materi Izhar
Black Box Materi Idgham
Black Box Materi Iqlab
Black Box Materi Ikhfa
Black Box
Memilih Latihan Latihan Huruf Hijaiyah
Black Box Latihan Mad
Black Box Latihan Qalqalah
Black Box Latihan Izhar
Black Box Latihan Idgham
Black Box Latihan Iqlab
Black Box Latihan Ikhfa
Black Box
4.2.4 Kasus dan Hasil Pengujian Alpha
4.2.4.1 Pengujian Login
Tabel 4.6 Pengujian Login Kasus dan Hasil Uji Benar Data Benar dan Uji Salah Data Salah
Data Masukan Yang diharapkan
Pengamatan Kesimpulan
Username : Admin Tercantum pada text
box username Dapat mengisi field
username dengan benar
[X] Diterima [ ] Ditolak
Password : ab Tercantum pada text
box password Dapat mengisi field
password dengan benar
[X] Diterima [ ] Ditolak
Klik tombol login Data user dan data
password dicek Tombol login dapat
berfungsi [X] Diterima
[ ] Ditolak Data username atau
password tidak terdaftar atau kode tidak sesuai
Tidak dapat login Muncul pesan
“Maaf, Login tidak berhasil..
Periksa kembali username dan
password anda Lalu coba
kembali...
” [X] Diterima
[ ] Ditolak
Data username atau password atau kode kosong
Tidak dapat login Muncul pesan
“Maaf, Login tidak berhasil..
Periksa kembali username dan
password anda Lalu coba
kembali...
” [X] Diterima
[ ] Ditolak
4.2.4.2 Logout
Tabel 4.7 Pengujian Logout
Kasus dan Hasil Uji Benar Data Benar Data Masukan
Yang diharapkan Pengamatan
Kesimpulan Keluar
Dapat keluar dan menghapus session
user Keluar dari menu
admin dan menuju ke tampilan
pengunjung [X] Diterima
[ ] Ditolak
4.2.4.3 Pengujian Pengolahan Pengguna Admin
Tabel 4.8 Pengujian Admin
Kasus Hasil Uji Benar Data Benar Data Masukan
Yang diharapkan Pengamatan
Kesimpulan tambah data user, contoh
masukan : Id user : budi
Password: 123 Validasi Password:123
Tersimpan dalam database dan dapat
ditampilkan Data
Ditampilkan [X] Diterima
[ ] Ditolak
hapus data admin, contoh masukan :
Klik Aksi Hapus sesuai data admin yang mau dihapus
Penghapusan data admin yang mau
dihapus Data admin
berhasil di hapus [X] Diterima
[ ] Ditolak
4.2.4.4
Pengujian Pengelolaan Materi
Tabel 4.9 Pengujian Pengelolaan Materi Kasus Hasil Uji Benar Data Benar
Data Masukan Yang diharapkan
Pengamatan Kesimpulan
Pengelolaan Materi Tampil Data-data
materi. Data materi
dapat ditambah, diedit, dan
dihapus [X] Diterima
[ ] Ditolak
Tambah data materi, contoh masukan :
materi: alif Deskripsi : alif
Gambar : tersedia Latin : tersedia
Suara : tersedia Tersimpan dalam
database dan dapat ditampilkan
Data Ditampilkan
[X] Diterima [ ] Ditolak
Edit data materi, contoh Data baru dapat
Data tersimpan [X] Diterima
masukan : materi: alif
Deskripsi : alif Gambar : tersedia
Latin : tersedia Suara : tersedia
terupdate dan tersimpan dalam
database dan ditampilkan
[ ] Ditolak
Hapus data materi, contoh masukan :
materi: alif Deskripsi : alif
Gambar : tersedia Latin : tersedia
Suara : tersedia Muncul Pesan
Anda telah berhasil menghapus materi
Muncul Pesan Anda telah
berhasil menghapus
materi [X] Diterima
[ ] Ditolak
Kasus Hasil Uji Salah Data Salah
Tambah data materi, contoh masukan :
Materi : tersedia Deskripsi : kosong
Gambar : kosong Latin : kosong
Suara : kosong Muncul pesan
Maaf Latin tidak boleh kosong
Muncul pesan Maaf Latin tidak
boleh kosong [X] Diterima
[ ] Ditolak
4.2.4.5
Pengujian Pengelolaan Latihan
Tabel 4.10 Pengujian Pengelolaan Latihan Kasus Hasil Uji Benar Data Benar
Data Masukan Yang diharapkan
Pengamatan Kesimpulan
Data Latihan Tampil Data-data
latihan materi. Data latihan
dapat ditambah, dan dihapus
[X] Diterima [ ] Ditolak
Tambah, soal, contoh masukan :
Materi yang akan ditampilkan
Tersimpan dalam database dan dapat
ditampilkan Data
Ditampilkan [X] Diterima
[ ] Ditolak
Hapus data soal latihan, contoh masukan :
Klik Aksi Hapus sesuai data latihan materi yang mau
dihapus Muncul Pesan
Anda telah berhasil menghapus latihan
Muncul Pesan Anda telah
berhasil menghapus
latihan [X] Diterima
[ ] Ditolak
4.1.5 Kesimpulan Pengujian Alpha
Berdasarkan hasil pengujian alpha fungsional dengan kasus uji diatas dapat ditarik kesimpulan sebagai berikut:
1. Jika data yang dimasukan benar maka sistem secara fungsional akan mengeluarkan keluaran sesuai dengan harapan.
2. Jika data yang dimasukan salah maka sistem akan mengeluarkan pesan kesalahan dan data keluaran tidak akan sesuai dengan harapan.
Dengan kata lain bahwa pembangunan Website Pembelajaran Membaca Alqur’an
ini bebas kesalahan dan secara fungsional mengeluarkan hasil yang sesuai dengan yang diharapkan.
4.2.6 Pengujian Beta
Pengujian beta ini dilakukan dengan cara melakukan pengujian melalui kuisioner yang dibagikan kebeberapa responden yang merupakan target pengguna
user target dari website yang sedang dibangun. Pengujian dilakukan agar mengetahui sejauh mana website yang dibangun dapat membatu menyelesaikan
permasalahan yang ada.
Tabel 4.11 Tabel kuisioner
No Beberapa point yang diteliti
Rumus prosentase yang digunakan
Skala penilaian 1.
Apakah anda setuju bahwa website dapat membantu
anda dalam
memahami pembelajaran dasar dalam membaca al-
qur’an Y = PQ 100
SS = Sangat setuju S = Setuju
CS = Cukup setuju BS = Biasa saja
KS = Kurang setuju TS = Tidak setuju
STS = Sangat tidak setuju
2. Apakah anda setuju bahwa dengan Website
ini bisa
menjadi alternatif
media pembelajaran yang lain
Keterangan: P = Banyaknya
jawaban responden tiap
soal. Q = Jumlah
responden Y = Nilai prosentase
3. Apakah anda setuju bahwa dengan adanya
soal latihan yang diberikan dalam Website ini dapat mengukur tingkat kemampuan
anda dalam membaca al- qur’an
4. Apakah anda setuju bahwa tampilan
Website ini sudah cukup user friendly untuk setiap penggunapengunjung
5. Apakah anda setuju jika web site ini sudah
layak untuk di online kan
Kuisioner ini diajukan kepada 10 orang user. Berikut ini adalah hasil prosentase masing-masing jawaban yang sudah dihitung nilainya dengan
menggunakan rumus diatas.
Tabel 4.12 Tabel Hasil kuisioner
No Pertanyaan
SS S
CS BS
KS TS
STS 1.
Apakah anda
setuju bahwa
website dapat
membantu anda dalam memahami pembelajaran
dasar dalam membaca al- qur’an
6 60 4 40
2. Apakah
anda setuju
bahwa dengan Website ini bisa menjadi alternatif
media pembelajaran yang lain
5 50 5 50
3. Apakah
anda setuju
bahwa dengan adanya soal
latihan yang
diberikan dalam Website ini
dapat mengukur
tingkat kemampuan anda dalam membaca al-
qur’an 550
550
4. Apakah
anda setuju
bahwa tampilan Website ini sudah cukup user
friendly untuk
setiap penggunapengunjung
440 440
210
5. Apakah anda setuju jika
web site ini sudah layak untuk di online kan
110 550
440
Berdasarkan hasil prosentase diatas dapat disimpulkan sebagai berikut: 1. Pada butir pertanyaan nomor satu terdapat sebanyak 6 orang atau 60
menyatakan sangat setuju dan 4 orang atau 40 menyatakan setuju bahwa, dengan adanya website ini dapat membantu siswa dalam memahami
pembelajaran dasar dalam membaca al- qur’an.
2. Pada butir pertanyaan nomor dua terdapat sebanyak 5 orang atau 50 menyatakan sangat setuju, 5 orang atau 50 menyatakan setuju dengan
adanya website ini dapat menjadi media pembelajaran alternatif yang lain. 3. Pada butir pertanyaan nomor tiga terdapat sebanyak 5 orang atau 50
menyatakan sangat setuju, 5 orang atau 50 menyatakan setuju bahwa, dengan adanya soal latihan dalam website ini dapat mengukur tingkat
kemampuan dalam membaca al- qur’an.
4. Pada butir pertanyaan nomor empat terdapat sebanyak 4 orang atau 40 menyatakan sangat setuju, 4 orang atau 40 menyatakan setuju dan 2 orang
atau 20 menyatakan cukup setuju bahwa, website ini sudah cukup user friendly untuk setiap penggunapengunjung.
5. Pada butir pertanyaan nomor delapan terdapat sebanyak 1 orang atau 10 menyatakan sangat setuju dan 5 orang atau 50 menyatakan setuju dan 4
orang atau 40 bahwa, website ini sudah layak untuk di online kan.
4.2.7 Kesimpulan Pengujian Beta
Berdasarkan pengujian beta diatas, dapat disimpulkan sebagai berikut : 1. Dapat membantu user dalam memahami pembelajaran tahap dasar membaca
al- qur’an
2. Bisa menjadi salah satu alternatif media pembelajaran yang baru bagi user 3. Dapat mengukur tingkat pemahaman siswa terhadap pembelajaran tahap dasar
membaca al- qur’an.
90
BAB V KESIMPULAN DAN SARAN
5.1 Kesimpulan
Kesimpulan yang dapat diambil setelah melalui tahap – tahap pembangunan
Website Pembelajaran Tahap Dasar Membaca Al- qur’an, adalah bahwa dengan
adanya Website ini: 1. Dapat menjadi media alternatif lain dalam memperoleh suatu pembelajaran
bagi para pemula 2. Dapat mempermudah mendapatkan pembelajaran karena bersifat online yang
bisa di akses dimana saja. 3. Memberikan materi berupa multimedia yang dapat membantu daya ingat dan
pemahaman. 4. Memberikan soal latihan yang dianggap penting untuk mengetahui tingkat
kemampuan dalam menempuh tingkat selanjutnya.
5.2 Saran
Berikut merupakan beberapa saran untuk pengembangan perangkat lunak selanjutnya, dengan harapan semakin tepatnya antara kebutuhan sistem dengan
fungsional perangkat lunak. 1. Diharapkan dibangun sistem pembelajaran dalam memperoleh materi secara
realtime supaya interaksi antara user dan sistem lebih baik
2. Penambahan jumlah materi dan pengembangan kategori materi yang di sajikan agar tampil lebih variatif
3. Pengembangan dalam pembuatan soal latihan yang dititik beratkan pada proses interaksi dengan pengguna
4. Mengembangkan materi ke tahap berikutnya, sehingga cakupan pengguna tidak hanya untuk tingkat dasar saja.
92
DAFTAR PUSTAKA
[1] Abdul Kadir, 2002, Konsep dan Tuntunan Praktis Basis Data, Andi, Yogyakarta.
[2] Bunafit Nugroho, 2004, Aplikasi Pemograman Web Dinamis dengan PHP dan MYSQL , Gava Media.
[3] Bunafit Nugroho, 2004, PHP dan MYSQL Dengan Editor Dreamweaver MX, Andi, Yogyakarta.
[4] Fathansyah, 2007, Basis Data, Informatika, Bandung. [5] Irawan, Budhi, 2005, Jaringan Komputer, Graha Ilmu, Yogyakarta.
[6] Kadir, Abdul, 2002, Dasar Pemrograman WEB Dinamis Menggunakan PHP, Andi, Yogyakarta.
[7] Jogianto H M, 1999, Pengenalan Komputer , Andi, Yogyakarta. [8] Soenarto Ahmad, 2000, Pelajaran Tajwid Praktis Lengkap, Bintang
Terang. Jakarta [9] Yahya M. Hasim, 2008, 5 Jam Lancar Membaca Menulis Al-
Qur’an, Qultummedia. Jakarta.
RIWAYAT HIDUP NIM
: 10105231 Kelas
: IF-5 Nama Lengkap
: Fahrizal Hadiansyah Tempat Tanggal Lahir
: Bandung, 13 Maret 1987 Agama
: Islam Jenis Kelamin
: Laki-laki Alamat
: Babakan Cilandak Rt 01 Rw 07 Desa Cipeujeuh Kecamatan Pacet Kabupaten Bandung
No. Telp : 02291837516
PENDIDIKAN
1993 – 1999
: SD Negeri I Cipeujeuh 1999
– 2002 : SMP Negeri I Kertasari
2002 – 2005
: SMA Negeri I Ciparay 2005
– 2010 : Program S1, Jurusan Teknik Informatika,
Fakultas Teknik dan Ilmu Komputer, Universitas Komputer Indonesia
– Bandung
Bandung, Februari 2010
Fahrizal Hadiansyah NIM : 10105231
WEBSITE PEMBELAJARAN TAHAP DASAR MEMBACA AL- QUR’AN DENGAN METODE INTERAKTIF LEARNING
FAHRIZAL HADIANSYAH Jurusan Teknik Informatika, Fakultas Teknik dan Ilmu Komputer
Universitas Komputer Indonesia Jln. Dipati Ukur No.112 Bandung 40132
k_dal13yahoo.co.id
ABSTRAK
Sejak tahun 50 an, pengajaran Al- Qur’an dengan menggunakan berbagai metode
dalam kenyataannya belum sempurna. Pengajaran dengan menggunakan metode Iqra merupakan suatu pengajaran yang cukup baik dan hampir sempurna. Pengajaran
membaca Al-Qur;an dengan menggunakan metode iqra lebih mudah di pahami, tapi akan lebih menarik apabila di sajikan dalam bentuk program aplikasi berbasis web. Hal ini
dapat membantu masyarakat umum agar lebih tertarik untuk membaca Al-
Qur’an. Karena dalam pengajaran nya yang bersifat individual, yaitu dapat di lakukan sendiri dengan cara
melihat dan mendengarkan nya. Tujuan penyusunan Tugas Akhir ini adalah untuk membangun sistem
pembelajaran yang dinamis dengan menggunakan bahan ajar bersifat mandiri self learning materials dan membantu dalam proses evaluasi hasil. Metodologi Penelitian
yang digunakan dalam penyusunan Tugas Akhir ini adalah observasi, studi literatur dan metode waterfall yang merupakan salah satu teknik analisis data. Untuk merancang
aplikasi ini digunakan metode perancangan struktural yaitu Data Flow Diagram DFD, DFD merupakan sebuah metode yang telah menjadi standar dalam industri untuk
visualisasi, merancang dan mendokumentasikan sistem perangkat lunak berdasarkan aliran data.
Sebagai hasil dari sistem pembelajaran ini di harapkan setiap orang dapat memperoleh pembelajaran dalam membaca Al-
Qur’an secara mandiri. Selain itu dapat memotivasi setiap orang untuk belajar membaca Al-
Qur’an, karena materinya di sajikan dalam bentuk multimedia interaktif.
Kata kunci: Metode Iqra, Self Learing Material, Multimedia Interaktif.
1. PENDAHULUAN
1.1 Identifikasi Masalah
1 Sulitnya membedakan
dalam pengucapan dan pembacaan huruf
Al- qur’an
2 Berhadapan dengan rasa malu, malas dan gengsi dalam belajar
khususnya orang dewasa 3 Panjangnya waktu pengajaran dan
tingkat kesulitan metode pengajaran yang sering tak teratasi
1.2 Maksud dan Tujuan
1 Membantu para pemula orang dewasa atau anak-anak untuk
bisa memahami
dasar-dasar dalam
membaca Al-
qur’an secara mandiri.
2 Membuat suatu
media pembelajaran yang interactive
bagi pemula
menggunakan audio visual
3 Memberikan latihan soal sebagai
umpan balik dari pembelajaran tersebut.
2. MODEL, ANALISA, DESAIN
DAN IMPLEMENTASI
2.1 Model
1. Tahap pengumpulan data a. Studi Kepustakaan.
b. Observasi. c. Wawancara.
2. Tahap pembuatan perangkat lunak. a. Requirements analysis and definition
b. System and software design c. Implementation and unit testing
d. Integration and system testing e. Operation and maintenance
2.2 Analisis Masalah
Analisis sistem ini diperoleh melalui wawancara, bservasi dan
studi kepustakaan
yang akan
ditemukan beberapa data dan fakta yang akan dijadikan bahan uji dan
analisis menuju penerapan dan pengembangan
sebuah aplikasi
sistem yang diusulkan. Dalam membaca Al-
Qur’an terdapat
kaidah-kaidah dalam
pengucapan huruf hijaiyah hukum tajwid yang harus dimengerti dan
dipahami oleh pembaca Al- Qur’an
tetapi pada prakteknya sering tidak diindahkan, banyak yang hanya
sekedar membaca tanpa mengetahui hukumnya. Kendala-kendala yang
dihadapi
dalam proses
belajar membaca Al-
Qur’an bagi pemula adalah dalam proses pengucapan
huruf masih
belum bisa
membedakan antara pengucapan huruf satu dengan huruf yang lain
dalam huruf hijaiyah dengan lafal yang hampir sama, selain itu
terdapat kendala lain dimana
Metode yang
digunakan adalah metode latihan drill
practise yaitu Suatu teknik dalam pendidikan dan pengajaran dengan
jalan melatih anak-anak terhadap bahan
pelajaran yang
sudah diberikan. Pengajar memberikan
materi-materi kepada
murid. Kemudian Materi-materi tersebut
diajarkan kepada murid satu persatu. Setelah itu Guru akan memberikan
latihan apabila di setiap materinya telah
dimengerti oleh
murid. Selanjutnya pengajar memberikan
nilai kepada murid dari hasil latihan yang telah dilakukan.
2.3 Flowmap Pembelajaran
Gambar 1. Flowmap Pembelajaran
Materi Pengenalan Huruf Hijaiyah
Materi Huruf Mad Panjang
Materi Qalqalah
Diajarkan Mengerti
Dipelajari dan Dihapalkan
Latihan A1
Pengajar Ustadz Siswa Anak
Tidak Ya
Materi Pengenalan Huruf Hijaiyah
Materi Huruf Mad Panjang
Materi Qalqalah
Diajarkan Mengerti
Dipelajari dan Dihapalkan
Latihan A2
Pengajar Ustadz Siswa Anak
Tidak Ya
Materi Iz-haar Materi Idghaam
Materi Iqlaab Materi Ikhfaa
Materi Iz-haar Materi Idghaam
Materi Iqlaab Materi Ikhfaa
2.4 Desain
1. ERD Entity Relationship Diagram
Admin Materi
Latihan Mengelola
Memiliki Memiliki
Kategori Id_kategori
Jawaban Memiliki
1 N
N 1
N kategori
deskripsi Id_kategori
gambar Id_materi
latin suara
username deskripsi
username password
Id_kategori Id_latihan
soal jenis
Id_materi Id_latihan
jawaban 1
1 Memiliki
Soal Id_latihan
Id_kategori soal_jawab
bahan date
username 1
1 N
1 1
Memiliki
Gambar 2. ERD Entity Relationship Diagram
2. Relasi Tabel
Kategori
PK id_kategori
kategori deskripsi
User
PK user_name
password Materi
PK id_materi
id_kategorii latin
gambar suara
user_name deskripsi
Latihan
PK id_latihan
id_materi id_kategori
jenis soal
Jawaban id_latihan
jawaban
1 1
1 1
N
N N
soal
PK id_soal
id_kategori soal_jawab
bahan date
user_name
N 1
1 1
1
Gambar 3. Relasi Tabel
3. Diagram Konteks
Website Pembelajaran Tahap
Dasar Membaca Al-
Qur’an Admin
Pengguna
Dt login Dt user
Dt kategori materi Dt materi
Dt latihan
Login invalid Info user
Info kategori mater Info materi
Info latihan Pilih Materi
Pilih Latihan
Info materi Info latihan
Gambar 4. Diagram Konteks 4. DFD Data Flow Diagram Level 0
1.0 Login
2.0 Pengelolaan
User 3.0
Pengelolaan Materi
4.0 Pengelolaan
Latihan Admin
T_user Login invalid
Dt login admin Dt user
Info dt user Info dt user
Dt user Login admin valid
Tambah user Hapus user
Info dt user Login admin valid
Tambah Materi Hapus Materi
Ubah Materi Info materi
Info latihan T_materi
T_latihan T_kategori materi
5.0 Pilih Materi
Penguna Dt
k a
te g
o ri
ma te
ri In
fo ka
te g
o ri
ma te
ri In
fo k
a te
g o
ri ma
te ri
Dt kategori materi
in fo
m a
te ri
Dt materi Info materi
Dt ma
te ri
Info latihan Dt latihan
6.0 Pilih Latihan
Info dt kategori materi Info dt materi
Dt kateori materi In
fo d
t ka te
g o
ri ma
te ri
In fo
d t ma
te ri
Info dt latihan Dt latihan
Info materi Dt materi
Info latihan Dt latihan
Login admin valid Tambah Latihan
Hapus Latihan Ubah Latihan
L o
g in
V a
lid L
o g
in V
a lid
L o
g in
V a
lid
Gambar 5. DFD Level 0
5. Struktur Menu
Menu utama Login
Admin Mengelola
Pengguna Tambah
Hapus Mengelola Materi
Tambah Ubah
Hapus Mengelola Latihan
Tambah Ubah
Hapus
Gambar 6. Struktur Menu Admin
Menu pengguna
Home Huruf hijaiyah
Huruf Mad Qalqalah
izhar
latihan iqlab
idgham
ikhfaa Pengguna
Lihat Lihat
Lihat Lihat
Lihat Lihat
Lihat Lihat
Lihat
Gambar 7 Struktur Menu Pengunjung
2.5 Implementasi
perangkat lunak yang digunakan dalam membangun website ini
adalah sebagai berikut: 1. Sistem operasi
: Microsoft
Windows XP 2. Software lainnya :
Adobe Potoshop CS3, Visio 2007
3. Macromedia Dreamweaver MX sebagai implementasi perancangan
sistem 4. MySql-5 sebagai media
penyimpanan database. 5. Web Browser : Internet
Explorer 6
1. Tampilan Login
Gambar. 8 Tampilan Login
2. Tampilan Menu Admin
Gambar. 9. Tampilan Menu Admin
3.Tampilan Pengelolaan User
Gambar. 10. Tampilan Menu Pengelolaan User
4. Tampilan Pengelolaan Materi
Gambar. 11. Tampilan Menu Pengelolaan Materi
4. Pengelolaan Latihan
Gambar. 12. Tampilan Menu Pengelolaan Latihan
5. Tampilan Menu Utama Pengunjung
Gambar 13. Tampilan Menu Utama Pengunjung
6. Tampilan Materi
Gambar 14. Tampilan Materi
7. Tampilan Latihan
Gambar 15. Tampilan Latihan
3. HASIL DAN DISKUSI
Kategori