Media pembelajaran untuk melatih keterampilan membaca kosakata (vocabulary) bahasa inggris untuk anak sekolah dasar dengan memanfaatkan google speech api

(1)

1

BAB 1

PENDAHULUAN

1.1 Latar Belakang Masalah

Memasuki era globalisasi, bahasa Inggris tidak dianggap sesuatu yang asing lagi bagi pelajar di Indonesia. Bahasa Inggris yang semula diperkenalkan kepada siswa Sekolah Menengah Pertama (SMP), sekarang sudah diperkenalkan kepada siswa Sekolah Dasar (SD) bahkan siswa yang masih duduk di bangku taman kanak-kanak atau play group sudah mulai diperkenalkan dengan bahasa asing ini walau konteks pembelajarannya masih belajar sambil bermain.

Sejak kurikulum 2006 atau Kurikulum Tingkat Satuan Pendidikan (KTSP) hingga kurikulum 2013 mata pelajaran bahasa Inggris di SD statusnya sama dengan bahasa daerah atau muatan lokal (mulok). Muatan lokal merupakan kegiatan kurikuler untuk mengembangkan kompetensi yang disesuaikan dengan ciri khas daerah, termasuk keunggulan daerah. Substansi muatan lokal ditentukan oleh satuan pendidikan.

Guru mata pelajaran bahasa Inggris SD memerlukan metode yang tepat untuk mempersiapkan dan mengajarkan siswa dalam penguasaan bahasa Inggris sebagai bahasa internasional. Pengajaran bahasa Inggris di SD akan terasa monoton dan membosankan jika guru minim kreatifitas, dan kurang menguasai metode pengajaran bahasa Inggris. Mengajar bahasa Inggris tidak hanya menuliskan vocabulary atau perbendaharaan kata di papan tulis, kemudian anak menyalinnya dibuku setelah itu anak menirukan guru dalam mengucapkan kata-kata atau vocabulary tadi. Mungkin cara ini adalah cara yang konvensional dan membuat anak didik maupun guru menjadi cepat bosan.

(2)

melafalkan kosakata bahasa Inggris yang tidak sesuai dengan ejaan bahasa Inggris. Hal ini disebabkan oleh faktor individu. Faktor individu dapat digolongkan menjadi dua. Faktor fisiologis yang baik akan menghasilkan keberhasilan yang baik pula. Sedangkan faktor psikologis sangat kompleks pengaruhnya terhadap keberhasilan belajar, karena mencakup minat, kecerdasan, bakat, motivasi, dan kemampuan kognitif. Faktor tersebut berbeda-beda pada setiap individu dan ini menyebabkan tidak meratanya hasil belajar dari setiap individunya.

Melihat permasalahan tersebut, maka dibuatlah sebuah sarana pembelajaran yang memanfaatkan kemajuan teknologi yang dirasa dapat membantu siswa SD dalam melatih keterampilan membaca dan melafalkan kosakata (vocabulary) bahasa Inggris. Sarana pembelajaran tersebut akan diimplemetasikan kedalam website.

Sarana pembelajaran yang ingin dibangun adalah “MEDIA PEMBELAJARAN UNTUK MELATIH KETERAMPILAN MEMBACA

KOSAKATA (VOCABULARY) BAHASA INGGRIS UNTUK ANAK

SEKOLAH DASAR DENGAN MEMANFAATKAN GOOGLE SPEECH API”. 1.2 Rumusan Masalah

Berdasarkan uraian pada latar belakang masalah, maka dapat dirumuskan masalah utama dari penelitian ini adalah bagaimana membangun media pembelajaran untuk melatih keterampilan membaca kosakata (vocabulary) bahasa Inggris untuk anak sekolah dasar dengan memanfaatkan Google Speech API. 1.3 Maksud dan Tujuan

(3)

Sedangkan tujuan yang akan dicapai dalam penelitian ini adalah membantu siswa SD dalam melatih keterampilan membaca dan melafalkan kosakata (vocabulary) bahasa Inggris.

1.4 Batasan Masalah

Agar pembangunan aplikasi ini lebih terarah, maka pembangunan ini dibatasi oleh hal-hal sebagai berikut:

a. Aplikasi yang dibangun berbasis web.

b. Data yang diolah dalam pembangunan aplikasi ini yaitu data soal latihan, data score dan data materi pelajaran bahasa Inggris kelas 5 SD.

c. Materi-materi media pembelajaran bahasa Inggris di sesuaikan dengan silabus, materi-materi tersebut merujuk ke beberapa modul dari 4 SD yang berbeda, yaitu time, numbers, days and months, the human body, family, intruction dan season and weather.

d. Soal latihan yang didukung adalah soal latihan yang bersifat pilihan ganda dan soal pelafalan kosakata (vocabulary).

e. Pengenalan suara digunakan hanya untuk menjawab soal pelafalan kosakata (vocabulary).

f. Metode analisis yang digunakan dalam pembangunan aplikasi ini berdasarkan data terstruktur yaitu menggunakan Flowchart dan ERD (Entity Relationship Diagram) dan untuk menggambarkan diagram proses menggunakan DFD (Data Flow Diagram).

1.5 Metodologi Penelitian

Penelitian ini menggunakan metode penelitian deskriptif, yaitu suatu metode untuk membuat gambaran atau deskriptif mengenai fakta-fakta dan informasi dalam situasi atau kejadian dimasa sekarang secara sistematis, faktual dan akurat. Adapun tahap yang akan dilalui adalah sebagai berikut:

1.5.1 Metode Pengumpulan Data

(4)

1. Studi Literatur

Pengumpulan data dengan cara mengumpulkan buku, jurnal dan paper serta informasi-informasi yang berkaitan judul penelitian.

2. Observasi

Teknik pengumpulan data dengan cara mengadakan penelitian dan peninjauan langsung terhadap permasalahan yang diambil.

3. Wawancara

Wawancara ini dilakukan terhadap beberapa guru bahasa Inggris untuk mengetahui metode pengajaran serta pemahaman siswa terhadap pembelajaran bahasa Inggris, dan kepada petugas penjaga warnet untuk mengetahui siapa saja pengunjung warnet terutama anak sekolah.

1.5.2 Metode Pembangunan Perangkat Lunak

Teknik analisis data dalam pembuatan perangkat lunak menggunakan paradigma perangkat lunak dengan model waterfall. Model waterfall adalah proses pengembangan perangkat lunak dengan tahap-tahap utama dari model ini memetakan kegiatan-kegiatan pengembangan dasar. Gambar 1.1 merupakan gambar model ilustrasi waterfall.

1. Tahap analysis

Tahap analisis mulai mencari fungsionalitas-fungsionalitas yang dibutuhkan untuk membangun media pembelajaran yang dalam hal ini analisis masalah, analisis masukan serta analisis kebutuhan fungsional dan nonfungsional.

2. Tahap design

(5)

3. Tahap code

Pada tahap code yaitu mulai mengeksekusi perancangan-perancangan yang dilakukan sebelumnya ke dalam bahasa pemrograman.

4. Tahap testing

Pada tahap testing bertujuan untuk menemukan kesalahan-kesalahan terhadap perangkat lunak untuk kemudian bisa diperbaiki.

Gambar 1.1 Metode Waterfall [1] 1.6 Sistematika Penulisan

Sistematika penulisan laporan ahir penelitian ini disusun untuk memberikan gambaran umum tentang penelitian yang dijalankan. Sistematika penulisan tugas akhir ini adalah sebagai berikut:

BAB 1 PENDAHULUAN

Menguraikan tentang latar belakang permasalahan, mencoba merumuskan inti permasalahan yang dihadapi, menentukan tujuan dan kegunaan penelitian, yang kemudian diikuti dengan pembatasan masalah, asumsi, serta sistematika penulisan.

BAB 2 LANDASAN TEORI

(6)

BAB 3 ANALISIS DAN PERANCANGAN SISTEM

Membahas tentang perancangan umum maupun uraian lebih lanjut mengenai perancangan sistem dalam pembangunan perangkat lunak. Uraian perancangan sistem ini meliputi perancangan data input dan output sistem, perancangan proses mengenai bagaimana sistem bekerja dengan proses-proses tertentu, maupun perancangan user interface.

BAB 4 IMPLEMENTASI DAN PENGUJIAN

Merupakan tahapan yang dilakukan dalam penelitian secara garis besar sejak dari tahap persiapan sampai penarikan kesimpulan, metode dan kaidah yang diterapkan dalam penelitian. Termasuk menentukan variabel penelitian, identifikasi data yang diperlukan dan cara pengumpulannya, penentuan sampel penelitian dan teknik pengambilannya, serta metode/teknik analisis yang akan dipergunakan dan perangkat lunak yang akan dibangun jika ada.

BAB 5 KESIMPULAN DAN SARAN

(7)

7

BAB 2

LANDASAN TEORI

2.1 Bahasa

Bahasa adalah sebuah sistem, artinya bahasa dibentuk oleh sejumlah komponen yang berpola secara tetap dan dapat dikaidahkan. Sistem bahasa berupa lambang-lambang bunyi, setiap lambang bahasa melambangkan sesuatu yang disebut makna atau konsep. Karena setiap lambang bunyi itu memiliki atau menyatakan suatu konsep atau makna, maka dapat disimpulkan bahwa setiap suatu ujaran bahasa memiliki makna. Contoh lambang bahasa yang berbunyi

“nasi” melambangkan konsep atau makna “sesuatu yang biasa dimakan orang sebagai makanan pokok”.

2.2 Bahasa Inggris

Bahasa Inggris adalah bahasa Jermanik yang pertama kali dituturkan di Inggris pada Abad Pertengahan Awal dan saat ini merupakan bahasa yang paling umum digunakan di seluruh dunia. Bahasa Inggris dituturkan sebagai bahasa pertama oleh mayoritas penduduk di berbagai negara, termasuk Britania Raya, Irlandia, Amerika Serikat, Kanada, Australia, Selandia Baru, dan sejumlah negara-negara Karibia, serta menjadi bahasa resmi di hampir 60 negara berdaulat. Bahasa Inggris adalah bahasa ibu ketiga yang paling banyak dituturkan di seluruh dunia, setelah bahasa Mandarin dan bahasa Spanyol. Bahasa Inggris juga digunakan sebagai bahasa kedua dan bahasa resmi oleh Uni Eropa, Negara Persemakmuran, dan Perserikatan Bangsa-Bangsa, serta beragam organisasi lainnya.

(8)

SD bahkan siswa yang masih duduk di bangku taman kanak-kanak atau play group sudah mulai diperkenalkan dengan bahasa asing ini walau konteks pembelajarannya masih belajar sambil bermain.

2.3 Pengertian E-learning

Pembelajaran berbasis elektronik (e-learning) telah dimulai pada tahun 1970-an, tetapi mulai bersifat komersial dan berkembang pesat sejak periode 1990-an. E-learning merupakan suatu penerapan teknologi informasi yang relatif baru di Indonesia, mulai dikenal secara komersial pada tahun 1995 ketika Indo-Internet membuka layanannya sebagai penyedia jasa layanan internet pertama. E-learning terdiri atas dua bagian, yaitu “e” yang merupakan singkatan dari electronic dan learning yang berarti pembelajaran. Jadi, e-learning berarti pembelajaran dengan menggunakan jasa/bantuan perangkat elektronika, khusunya perangkat komputer. E-learning dalam berbagai literatur didefinisikan sebagai berikut.

“e-Learning is a generic term for all technologically supported learning using an array of teaching and learning tools as phone bridging, audio and videotapes, teleconferencing, satellite transmissions, and the more recognized web-based training or computer aided instruction also commonly referred to as

online courses”.

(9)

Kartasasmita (2003) mengemukakan bahwa salah satu ciri e-learning adalah adanya pembelajaran dengan kombinasi teknologi dan berbagai terapan praktis, serta dengan kesegraan kemudahan akses ke sumber belajar, ke pengajar dan ke sesama pembelajar melalui internet. Fakta adanya kombinasi teknologi dengan terapan dalam e-learning juga dikemukakan oleh Savel yang menyatakan bahwa e-learning mengintegrasikan teknologi elektronik dan pendidikan, karena itu penggunaan internet sangat dominan pada e-learning. Masih sejalan dengan hal diatas, menurut Linde (2004), e-learning adalah pembelajaran secara formal dan informal yang dilakukan melalui media elektronik, seperti internet, intranet, CD-ROM, video tape, DVD, TV, handphone, PDA dan lain-lain [2].

2.4 Pengertian Basis Data

Sistem basis data adalah sistem terkomputerisasi yang tujuan utamanya adalah memelihara data yang sudah diolah atau informasi dan membuat informasi tersedia saat dibutuhkan. Pada intinya basis data adalah media untuk menyimpan data agar dapat diakses dengan mudah dan cepat [1].

2.4.1 Database Management System (DBMS)

DBMS (Database Management System) atau dalam bahasa indonesia sering disebut sebagai Sistem Manajemen Data adalah suatu sistem aplikasi yang digunakan untuk menyimpan, mengelola, dan menampilkan data. Suatu sistem aplikasi disebut DBMS jika memenuhi persyaratan minimal dapat menyediakan fasilitas untuk mengelola akses data, mampu menangani integrasi data, dan mampu menangani backup data.

(10)

Pada tahun 1980-an mulai berkembang Object Oriented DBMS (OODBMS). OODBMS berkembang seiring dengan perkembangan teknologi pemrograman berorientasi objek. Secara umum dapat diartikan bahwa OODBMS merupakan DBMS yang memandang data sebagai suatu objek.

Terdapat beberapa macam DBMS versi komersial yang paling sering digunakan di dunia saat ini, diantaranya Oracle, Microsoft SQL Server, IBM DB2, dan Microsoft Access. Sedangkan DBMS versi open source yang cukup berkembang dan sering digunakan saat ini adalah diantaranya MySQL, PostgreSQL, Firebird, dan SQLite. Hampir semua DBMS mengadopsi SQL sebagai bahasa untuk mengelola data pada DBMS [1].

2.4.2 Structured Query Language (SQL)

SQL (Structured Query Language) adalah bahasa yang digunakan untuk mengelola data pada DBMS. Meskipun SQL diadopsi dan diacu sebagai bahasa standar oleh hampir sebagian besar RDBMS yang beredar saat ini, tetapi tidak semua standar yang tercantum dalam SQL diimplementasikan oleh seluruh DBMS tersebut. Sehingga terkadang terdapat perbedaan prilaku (hasil yang ditampilkan) oleh DBMS yang berbeda padahal query yang dimasukan sama [1]. 2.5 ERD (Entity Relationship Diagram)

ERD (Entity Relationship Diagram) merupakan notasi grafis dalam pemodelan data konseptual, yang mendeskripsikan hubungan antara penyimpanan. ERD digunakan untuk memodelkan struktur data dan hubungan antar data, karena hal ini relatif kompleks. Dengan ERD, model dapat diuji dengan mengabaikan proses yang harus dilakukan. ERD menggunakan sejumlah notasi dan simbol untuk menggambarkan struktur dan hubungan antar data, pada dasarnya ada 4 macam usur yang digunakan:

(11)

2. Attribut: Entity mempuyai elemen yang disebut atribut, dan berfungsi mendeskripsikan karakter entity.

3. Relasi: Relationship sebagaimana entity maka dalam hubunganpun harus dibedakan dalam hubungan atau bentuk hubungan antar entity dengan isi dari hubungan itu sendiri.

4. Garis Relasi: Garis yang merelasikan dari satu entitas ke entitas lain.

Relasi yang terjadi diantara dua himpunan entitas (misalnya A dan B) dalam satu basis data yaitu:

1. Satu ke satu (One to one): Hubungan relasi satu ke satu yaitu setiap entitas pada himpunan entitas A berhubungan paling banyak dengan satu entitas pada himpunan entitas B.

2. Satu ke banyak (One to many): Setiap entitas pada himpunan entitas A dapat berhubungan dengan banyak entitas pada himpunan entitas B.

3. Banyak ke banyak (Many to many): Setiap entitas pada himpunan entitas A dapat berhubungan dengan banyak entitas pada himpunan entitas B.

2.5.1 Varian Entitas dan Relasi

Idealnya himpunan entitas yang terlibat dalam sebuah ERD adalah himpunan entitas kuat/bebas. Himpunan entitas demikian tidak memiliki ketergantungan dengan himpunan entitas lainnya. Namun demikian, dalam pembentukan ERD kita tidak selalu dapat melibatkan himpunan entitas seperti itu. Ada kalanya kita juga melibatkan himpunan entitas yang lemah atau merupakan bagian dari himpunan entitas lainnya.

2.5.1.1Himpunan Entitas Lemah (Weak Entity Sets)

(12)

2.5.1.2Sub Entitas (Subtype Entities)

Merupakan himpunan entitas yang beranggotakan entitas-entitas yang merupakan bagian dari himpunan entitas yang lebih superior (utama). Sub Entitas ini merupakan hasil dekomposisi (spesialisasi) himpunan entitas berdasarkan pengelompokan tertentu.

2.6 DFD (Data Flow Diagram)

Data Flow Diagram (DFD) awalnya dikembangkan oleh Chris Gane dan Trish Sarson pada tahun 1979 yang termasuk dalam Structured System Analysis and Design Methodology (SSADM) yang ditulis oleh Chris Gane dan Trish Sarson. Sistem yang dikembangkan ini berbasis pada dekomposisi fungsional dari sebuah sistem. Berikut adalah gambar 2.1, DFD yang dikembangkan oleh Chris Gane dan Trish Sarson.

Gambar 2.1 Data Flow Diagram

(13)

DFD tidak sesuai untuk memodelkan sistem perangkat lunak yang akan dibangun menggunakan pemrograman berorientasi objek. Paradigma pemrograman terstruktur dan pemrograman berorientasi objek merupakan hal yang berbeda. Jangan mencampuradukankan pemrograman terstruktur dan pemrograman berorientasi objek [1].

2.7 Kuesioner

Kuesioner terdiri dari sejumlah pertanyaan dicetak atau diketik dalam urutan yang pasti di formulir atau set bentuk. Kuesioner dikirimkan kepada responden yang diharapkan untuk membaca dan memahami pertanyaan dan menuliskan jawaban dimaksudkan untuk tujuan dalam kuesioner itu sendiri [3].

Sebagai bentuk umum dari kuesioner itu dapat dibagi menjadi kuesioner terbuka atau tertutup.

1. Kuesioner terbuka adalah pertanyaan dari suatu kuesioner yang memberikan kebebasan penuh kepada responden untuk menjawabnya dan tidak ada jawaban alternatif

2. Kuesioner tertutup adalah kuesioner yang memberikan jawaban alternatif yang telah ditentukan oleh pembuat kuesioner. Pertanyaan disajikan dengan tepat dan kata-kata yang sama dalam urutan yang sama untuk semua responden. 2.7.1 Jenis Skala Likert

(14)

Gambar 2.2 Skala Likert 30 × 5 = 150 Respon Paling menguntungkan

30 × 3 = 90 Sikap netral

30 × 1 = 30 sikap Paling tidak menguntungkan.

Skor untuk setiap individu akan jatuh antara 30 dan 150. Jika skor kebetulan di atas 90, itu menunjukkan opini positif ke titik pandangan tertentu, skor di bawah 90 berarti tidak pada opini yang menguntungkan dan skor persis 90 sikap netral.

2.8 Website

Menurut Sutarman dalam bukunya yang berjudul Membangun Aplikasi Web dengan PHP & MySQL edisi 2 mengatakan bahwa:

Website (situs web) adalah merupakan alamat (URL) yang berfungsi sebagai tempat penyimpanan data dan informasi berdasarkan topik tertentu [4].

Website atau situs dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari pemilik serta pengguna website. Contoh website statis adalah berisi profil perusahaan, sedangkan website dinamis adalah seperti Friendster, Multiply

Sangat Tidak Setuju Tidak Setuju Ragu-ragu Setuju Sangat Setuju

(15)

dan lain-lain. Dalam sisi pengembangannya, website statis hanya bisa di update oleh pemiliknya saja, sedangkan website dinamis bisa di update oleh pengguna maupun pemiliknya.

2.9 Google Speech API

Penggunaan Google Speech API memungkinkan developer untuk mengkonversi ucapan ke dalam teks. Layanan ini dapat diproses secara offline dan online. Namun pada pemrosesan secara offline, bahasa yang didukung terbatas pada bahasa yang terdapat pada masing-masing device. Berbeda dengan pemrosesan secara online yang memungkinkan dukungan bahasa yang lengkap dan dapat dioperasikan hampir di semua device. Namun dalam penggunaannya layanan ini memerlukan koneksi internet karena pengenalan suara (speech recognition) terjadi di server Google. Alur penggunaan Google Speech API dapat dilihat pada gambar 2.3.

Gambar 2.3 Alur Penggunaan Google Speech API

Input pada proses ini merupakan suara pengguna dan output yang dihasilkan pada proses ini berupa teks yang nantinya akan digunakan untuk pengecekan/pencocokan dengan teks jawaban soal latihan vocabulary.

(16)

Gambar 2.4 Speech Recognition Process

Pada level application ada komponen utama yang tersedia untuk developer yaitu recognizer.

Pada level speech kit ada beberapa proses yang terkoordinasi, yaitu: 1. Library sepenuhnya mengelola sistem audio untuk recording.

2. Komponen networking mengelola koneksi ke server.

3. End detection menentukan bila pengguna telah berhenti berbicara dan secara otomatis menghentikan rekaman.

Sistem server bertanggung jawab untuk sebagian besar pekerjaan dalam siklus pemrosesan suara (speech processing). Proses pengenalan ucapan (recognition) dilakukan pada server.

2.10 Bahasa Pemrograman yang Digunakan

(17)

2.10.1 HTML (Hyper Text Markup Language)

HTML adalah bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web internet (browser).

Menurut Ir. Betha Sidik dan Ir. Husni Pohan M. Eng. dalam bukunya yang berjudul pemograman web dengan HTML, mengatakan bahwa:

HTML kependekan dari Hyper Text Markup Language, Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang [5].

Sedangkan Menurut Sutarman dalam bukunya yang berjudul Membangun Aplikasi Web dengan PHP & MySQL edisi 2 mengatakan bahwa:

HTML kependekan dari Hyper Text Markup Language adalah suatu bahasa yang digunakan untuk menulis halaman web [4].

HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet. Supaya dapat menghasilkan tampilan wujud yang terintegerasi pemformatan hyperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML. HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup Language (SGML).

(18)

2.10.2 PHP (Hypertext Processor)

Menurut Muhammad Miftakhul Amin dalam bukunya yang berjudul Pengembangan Aplikasi Web menggunakan PHP Data Object (PDO) sebagai berikut:

PHP merupakan sebuah bahasa pemograman server side scripting yang lahir sejalan dengan perkembangan internet [6].

Sedangkan Menurut Sutarman dalam bukunya yang berjudul Membangun Aplikasi Web dengan PHP & MySQL edisi 2 mengatakan bahwa:

PHP adalah salah satu bahasa server side yang di desain khusus untuk aplikasi web [4].

Intinya PHP adalah bahasa pemograman server side yang didesain untuk aplikasi web. PHP ini programnya open source dibawah lisensi GNU atau GPU (General Public License) yang dapat didownload di situs http://www.php.net. dengan seiringnya perkembangan internet terdapat beberapa vesi PHP, seperti PHP/FI, PHP2, PHP3, PHP4, PHP5 dan juga PHP banyak mendukung basis data, seperti MySQL, Oracle, ODBC dan lainya.

PHP mendukung sebagai database, sehingga database yang kita buat dengan MySql ataupun jenis database lainya dapat diakses oleh PHP dan bisa untuk menampilkan isinya ataupun bisa memanipulasi datanya melalui halaman web.

2.10.3 CSS (Cascading Style Sheets)

(19)

CSS biasanya digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markah lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.

CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh penjelajah web basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

2.10.4 JavaScript

Menurut Wahana Komputer dalam bukunya yang berjudul Menguasai Pemograman web dengan JavaScript 2009, mengatakan bahwa:

JavaScript merupakan bahasa yang berbentuk kumpulan skrip yang berfungsi untuk memberikan tampilan yang tampak lebih interaktif pada dokumen web [7].

(20)

2.11 Perangkat Lunak yang Digunakan

Perangkat lunak yang digunakan dalam pembangunan media pembelajaran ini adalah sebagai berikut:

2.11.1 Dreamweaver CS3

Dreamweaver CS3 merupakan web editor untuk membuat dan mendesain website dengan mudah dan cepat. Kemampuannya dalam membuat website tanpa menuliskan tag-tag HTML satu persatu, menjadikan program ini merupakan salah satu web editor favorit banyak pengguna web [8]. Tampilan awal Dreamweaver CS3 dapat dilihat pada gambar 2.5.

Gambar 2.5 Dreamweaver CS3 2.11.2 Adobe Photoshop CS4

(21)

inilah yang akhirnya membuat software ini banyak digunakan oleh desainer grafis profesional.

Sampai saat ini masih belum ada software desain grafis lain yang bisa menyamai kelengkapan fitur dalam Photoshop. Aplikasi ini berperan dalam merancang tampilan web meliputi tombol, header, footer dan textedit yang bisa diatur sesuai dengan kebutuhan. Tampilan awal Adobe Photoshop CS4 dapat dilihat pada gambar 2.6.

Gambar 2.6 Adobe Photoshop CS4 2.11.3 XAMPP

XAMPP merupakan paket PHP dan MySQL berbasis open source yang digunakan sebagai tool pembantu pengembangan aplikasi berbasis PHP. XAMPP mengkombinasikan beberapa paket perangkat lunak berbeda kedalam satu paket [9]. Beberapa paket yang di bundel adalah sebagai berikut.

(22)

extension, PDFlib Lite extension, PEAR, phpMyAdmin, FPDF Library, ADOdb, Perl, CPAN, PPM, mod_perl, Apache::ASP.

Tampilan awal XAMPP dapat dilihat pada gambar 2.6.

(23)

23

BAB 3

ANALISIS DAN PERANCANGAN SISTEM

3.1 Analisis Sistem

Analisis sistem (System 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.

3.2 Analisis Masalah

Analisis masalah akan menjelaskan tentang masalah yang umumnya terjadi di sekolah-sekolah dasar. Berdasarkan kesimpulan dari hasil wawancara dengan beberapa guru bahasa Inggris di 4 sekolah dasar (SDN Haurpancuh 2, SDN Karang Harja 1, SDN Kadumalati 2 dan SD Muhammadiyah), bahwa permasalahan yang banyak dijumpai yaitu banyak siswa yang mengalami kesulitan dalam membaca dan melafalkan kosakata bahasa Inggris yang tidak sesuai dengan ejaan bahasa Inggris.

3.3 Analisis Materi

Penggunaan media pembelajaran ini akan digambarkan berdasarkan pada masing-masing materi yang merujuk ke 4 modul bahasa Inggris yang digunakan pada sekolah yang berbeda-beda. Masing-masing materi yang berkaitan yaitu Time, Numbers, Days & Months, The Human Body, Family, Instruction, Season and Wheater. Berikut ini materi-materi yang akan dijelaskan.

1. Time

(24)

2. Numbers, Days & Months

Indikator pencapaian dari materi numbers, days & months adalah sebagai berikut.

a. Siswa dapat menyebutkan angka 70 – 1.000.000. b. Siswa dapat menyebutkan hari berdasarkan urutannya. c. Siswa dapat menyebutkan bulan berdasarkan urutannya. 3. The Human Body

Indikator pencapaian dari materi the human body adalah siswa dapat menyebutkan bagian-bagian tubuh manusia.

4. Family

Indikator pencapaian dari materi family adalah siswa dapat mengungkapkan dan memperkenalkan keluarganya.

5. Instruction

Indikator pencapaian dari materi Instruction adalah siswa dapat mengungkapkan petunjuk/tanda yang ada di tempat umum.

6. Season and Weather

Indikator pencapaian dari materi season and weather adalah siswa dapat mengungkapkan atau menyebutkan musim dan cuaca.

3.4 Analisis Evaluasi

Selain terdapat materi, di dalam media pembelajaran juga terdapat tes untuk mengukur kemampuan siswa berdasarkan materi yang telah diberikan. Adapaun tes kemampuan pada media pembelajaran bahasa Inggris diantaranya:

1. Pelatihan 1

Soal latihan yang diberikan pada saat setelah siswa memahami materi yang disediakan di aplikasi media pembelajaran.

a. Soal berupa pilihan ganda.

(25)

c. Soal pada pelatihan 1 ditampilkan atau disusun secara acak. d. Terdapat bank soal dengan jumlah 20 soal.

e. Setiap jawaban benar akan mendapatkan nilai. f. Jika salah, maka tidak akan mendapatkan nilai.

g. Score didapat dari perhitungan “(jawaban benar x 100)/jumlah soal”. h. Setelah selesai akan dimunculkan score akhir tersebut.

2. Pelatihan 2

Soal latihan yang diberikan dengan tujuan agar siswa lebih lancar dalam melafalkan kosakata (vocabulary) bahasa Inggris.

a. Soal pada pelatihan 2 merupakan soal vocabulary. b. Soal di jawab melalui pengenalan suara user. c. Soal pada pelatihan 2 berisi 6 soal vocabulary.

d. Soal pada pelatihan 2 ditampilkan atau disusun secara acak. e. Terdapat bank soal dengan jumlah minimal 10 soal.

f. Setiap jawaban benar akan mendapatkan nilai. g. Jika salah, maka tidak akan mendapatkan nilai.

h. Score didapat dari perhitungan “(jawaban benar x 100)/jumlah soal”. i. Setelah selesai akan dimunculkan score akhir tersebut.

3.5 Analisis Google Speech API

Pemanfaatan Goole Speech API digunakan untuk menjawab soal-soal latihan vocabulary, misalnya pada soal latihan vocabulary terdapat soal dengan

kata “single” kemudian user menjawab soal tersebut melalui suara user itu sendiri dengan mengulang kata pada soal tersebut, suara user akan di konversi oleh Google Speech API. Jika suara pelafalan tersebut sudah sesuai dengan ejaan bahasa Inggris maka hasil konversi yang telah di proses oleh Goole Speech API akan menghasilkan output kata “single”, sebaliknya jika suara pelafalan tersebut tidak sesuai dengan ejaan bahasa Inggris maka akan menghasilkan output kata

(26)

Agar fitur ini dapat berjalan maka fitur ini harus membutuhkan koneksi internet agar dapat berjalan mendeteksi ucapan, karena terlalu banyak kata yang dipakai oleh aplikasi untuk menjawab soal latihan vocabulary. Oleh karena terlalu banyak, maka aplikasi ini membutuhkan koneksi internet untuk mengakses database di server Google secara online, dikarenakan tempat penyimpanan device terlalu kecil sehingga lebih baik dibiarkan saja disimpan milliaran kata-kata tersebut di server Google.

Dalam pemrosesannya untuk dapat mengkonversi suara ke dalam bentuk teks terdapat beberapa tahapan, diantaranya:

1. Suara pengguna berupa sinyal analog dikonversi oleh perangkat komputer kedalam bentuk diskrit yang kemuadian di ubah bentuk kedalam bentuk biner dan secara realtime dikirim ke server untuk dilakukan proses konversi.

2. Setelah pengguna berhenti berbicara (stop recording or end detect)/server menerima seluruh data percakapan dalam bentuk digital/biner, kemudian server akan melakukan proses konversi.

3. Setelah proses konversi selesai, server akan mengirim hasil konversi berupa teks (string) ke device.

3.6 Sistem Kebutuhan Perangkat Lunak (SKPL)

Berdasarkan analisis masalah yang dibutuhkan oleh perangkat lunak, maka perangkat lunak harus memenuhi kriteria-kriteria. Kriteria-kriteria tersebut dapat dilihat pada tabel 3.1.

Tabel 3.1 SKPL

Kode Keterangan

Fungsional

SKPL – F1 Sistem dapat menampilkan materi pelajaran

SKPL – F2 Sistem menyediakan soal-soal latihan kepada siswa sebagai evaluasi terhadap materi yang diberikan

Non-Fungsional

SKPL – NF1 Sistem mampu menerima inputan dari mouse, keyboard dan microphone

SKPL – NF2 Menampilkan score

(27)

3.7 Analisis Kebutuhan Non-Fungsional

Analisis kebutuhan non-fungsional dilakukan untuk menghasilkan spesifikasi dari sistem yang sedang berjalan. Spesifikasi kebutuhan non-fungsional adalah spesifikasi yang rinci tentang hal-hal yang akan dilakukan sistem ketika diimplementasikan serta komponen-komponen yang akan dilibatkan pada sistem yang akan dibangun meliputi analisis user, analisis perangkat lunak (software), dan analisis perangkat keras (hardware).

3.7.1 Analisis Kebutuhan Perangkat Keras

Agar aplikasi dapat berjalan dengan baik, maka dibutuhkan perangkat keras yang sesuai dengan kebutuhan aplikasi. Spesifikasi minimum perangkat keras yang dibutuhkan agar dapat mengakses media pembelajaran dapat dilihat pada tabel 3.2.

Tabel 3.2 Spesifikasi perangkat keras

No. Perangkat Keras Spesifikasi

1 Processor Processor dengan minimal kecepatan 1.6 GHz 2 Monitor Monitor dengan resolusi 1024 x 768 pixel

3 Graphic Card VGA Minimum 512 MB 4 Harddisk 80 GB

5 Memory Minimum RAM 1GB 6 Mouse, Keyboard, Speaker

dan Microphone

Standar

7 Koneksi Internet Standar

3.7.2 Analisis Kebutuhan Perangkat Lunak

Perangkat lunak digunakan dalam sebuah sistem merupakan perintah-perintah yang diberikan kepada perangkat keras agar bisa saling berinteraksi diantara keduanya. Perangkat lunak yang dipakai untuk menjalankan aplikasi dapat dilihat pada tabel 3.3.

Tabel 3.3 Spesifikasi perangkat lunak

No. Perangkat Lunak Spesifikasi

1 Sistem Operasi Windows XP/7/8

(28)

No. Perangkat Lunak Spesifikasi

3 Database Management System (DBMS) MySQL

4 Pengenalan Suara Google Speech API

3.7.3 Analisis Pengguna

Suatu aplikasi akan berjalan optimal apabila ditunjang oleh pengguna yang memiliki kemampuan dalam menjalankannya. Adapun analisis pengguna pada sistem yang sedang berjalan dapat dilihat pada tabel 3.4.

Tabel 3.4 Analisis pengguna yang berjalan

Pengguna Pendidikan Tanggung Jawab

Guru S1 1. Memberikan materi kepada siswa.

2. Memberikan pelatihan-pelatihan dan test kepada siswa.

Siswa SD Kelas 5 1. Menerima materi yang diberikan oleh guru. 2. Menyelesaikan pelatihan-pelatihan dan test

yang diberikan oleh guru.

Penguna yang dibutuhkan yaitu admin/guru dan user/siswa. Analisis pengguna yang dibutuhkan merupakan pengguna yang akan menggunakan media pembelajaran yang akan dibangun ini, yaitu seperti terlihat pada tabel 3.5 dan 3.6.

Tabel 3.5 Analisis pengguna admin yang dibutuhkan

Pengguna

Hak Akses Mengelola media pembelajaran bahasa Inggris

Tingkat Pendidikan S1

User Experience Pengguna dapat menggunakan komputer

User Job & Task 1. Pengguna dapat mengerti perintah atau instruksi yang diberikan.

2. Minimal pengguna dapat menggunakan komputer.

User Physical Characteristic Memiliki penglihatan yang baik Jenis pelatihan yang harus

diberikan

(29)

Tabel 3.6 Analisis pengguna siswa yang dibutuhkan

Pengguna

Hak Akses Menggunakan media pembelajaran bahasa

Inggris

Tingkat Pendidikan SD Kelas 5

User Experience Pengguna dapat menggunakan komputer

User Job & Task 1. Pengguna dapat mengerti perintah atau instruksi yang diberikan.

2. Minimal pengguna dapat menggunakan komputer.

User Physical Characteristic 1. Memiliki pendengaran yang baik. 2. Memiliki penglihatan yang baik. 3. Memiliki intonasi suara yang jelas.

Jenis pelatihan yang harus diberikan

Pelatihan seputar tata cara penggunaan media pembelajaran bahasa Inggris

3.8 Analisis Data

Analisis data pada sistem yang akan dibangun menggunakan Entity Relation Diagram (ERD). ERD adalah model data yang menggunakan beberapa notasi untuk menggambarkan data dalam konteks entitas dan hubungan yang di deskripsikan oleh data tersebut. ERD yang telah digunakan menggambarkan sistem yang terdiri dari hubungan antar entitas yang sedang berjalan. Untuk melihat keterhubungan antar entitas yang ada maka akan digambarkan pada gambar 3.1.

mengolah

admin username

admin 1 N menu_materi

memiliki

(30)

Kamus data ERD berisi semua entitas serta atribut-atribut yang terkandung dalam ERD. Setiap atribut yang ada dalam sebuah entitas dapat dituliskan dalam kamus data ERD ini. Adapun kamus data dari ERD diatas terdapat pada tabel 3.7.

Tabel 3.7 Kamus Data ERD

No. Entitas Atribut

1 admin username, userpass, nama, photo

2 menu_materi mn_materi_id, judul_mn_materi, deskripsi, publish

3 isi_materi isi_materi_id, mn_materi_id, isi_materi_x, deskripsi, publish

4 soal_vocab soal_vocab_id, mn_materi_id, kunci_jawaban, publish

5 soal_pg soal_pg_id, mn_materi_id, pertanyaan, pilihan_a, pilihan_b, pilihan_c, pilihan_d, kunci_jawaban, publish

3.9 Analisis Kebutuhan Fungsional

Analisis kebutuhan fungsional bertujuan untuk menganalisis proses yang akan diterapkan dalam sistem yang akan dibangun. Analisis kebutuhan fungsional pada aplikasi ini menggunakan Diagram Konteks, pembuatan DFD, dan Spesifikasi Proses.

3.9.1 Diagram Konteks

(31)

MEDIA PEMBELAJARAN BAHASA INGGRIS

siswa

Data jawaban PG Data jawaban vocabulary

admin

Info login Info menu materi

Info isi materi Info soal_PG Info soal vocabulary Data soal vocabulary Data soal_PG Data isi materi Data menu materi

Data login

Info beranda Info menu materi

Info isi materi Info soal_PG Info soal vocabulary

Info score

google speech API

Info suara yang akan Di konversi ke teks

Data teks yang telah di konversi dari suara

Gambar 3.2 Diagram Konteks Media Pembelajaran Bahasa Inggris 3.9.2 Data Flow Diagram (DFD)

DFD (Data Flow Diagram) merupakan sebuah teknik yang menggambarkan

aliran data dan transformasi yang digunakan sebagai perjalanan data dari masukkan

menuju keluaran. DFD dibuat jika pada Diagram Konteks masih terdapat proses yang

mesti dijelaskan lebih rinci. Berikut ini adalah DFD pada Media Pembelajaran Bahasa

Inggris.

3.9.2.1DFD Level 1

(32)

1

Login valid Login valid

Login valid

Data menu materi Data isi materi Data soal_PG Data soal vocabulary

D

Data isi materi Data soal_PG

Data soal vocabulary

Data teks yang telah di konversi dari suara

Gambar 3.3 DFD Level 1 Media Pembelajaran Bahasa Inggris

3.9.2.2DFD Level 2 Proses 2 Pengolahan Menu Materi

(33)

2.1

Gambar 3.4 DFD Level 2 Proses 2 Pengolahan Menu Materi 3.9.2.3DFD Level 2 Proses 3 Pengolahan Isi Materi

(34)

3.1

Gambar 3.5 DFD Level 2 Proses 3 Pengolahan Isi Materi 3.9.2.4DFD Level 2 Proses 4 Pengolahan Soal PG

(35)

4.1 Tambah Data

Soal PG

4.2 Ubah Data Soal

PG Cari Data Soal

PG

Gambar 3.6 DFD Level 2 Proses 4 Pengolahan Soal PG 3.9.2.5DFD Level 2 Proses 5 Pengolahan Soal Vocabulary

(36)

5.1 Tambah Data

Soal Vocabulary

5.2 Ubah Data Soal

Vocabulary Cari Data Soal

Vocabulary

Gambar 3.7 DFD Level 2 Proses 5 Pengolahan Soal Vocabulary 3.9.2.6DFD Level 2 Proses 7 Lihat Materi

(37)

7.1

Gambar 3.8 DFD Level 2 Proses 7 Lihat Materi 3.9.2.7DFD Level 2 Proses 8 Lihat Latihan

DFD Level 2 Proses 8 pada sistem terdapat 2 proses yaitu lihat menu materi dan mengerjakan soal vocabulary dan menghitung score. DFD Level 2 Proses 8 dapat dilihat pada gambar 3.9.

menu_materi Data teks yang telah

di konversi dari suara

Gambar 3.9 DFD Level 2 Proses 8 Lihat Latihan 3.9.3 Spesifikasi Proses

(38)

Tabel 3.8 Spesifikasi Proses

No. Proses Keterangan

1

No. Proses 1

Nama Proses Login

Source (sumber) Admin

Input Data Login

Output Info Login Invalid

Destination Admin

Logika Proses 1. Sistem menampilkan form login.

2. Admin memasukkan Username dan Password. 3. Sistem akan memeriksa ke database.

4. Jika Username dan Password benar, maka akan masuk ke

Nama Proses Pengolahan Menu Materi

Input Data menu materi

Output Info menu materi

Destination Admin

Logika Proses 1. Sistem menampilkan halaman olah menu materi. 2. Admin dapat melihat data menu materi.

3. Admin dapat mencari data menu materi. 4. Admin dapat menambah data menu materi. 5. Admin dapat mengubah data menu materi. 6. Admin dapat menghapus data menu materi.

3

No. Proses 3

Nama Proses Pengolahan Isi Materi

Input Data isi materi

Output Info isi materi

Destination Admin

Logika Proses 1. Sistem menampilkan halaman olah isi materi. 2. Admin dapat melihat data isi materi.

3. Admin dapat mencari data isi materi. 4. Admin dapat menambah data isi materi. 5. Admin dapat mengubah data isi materi. 6. Admin dapat menghapus data isi materi.

4

No. Proses 4

Nama Proses Pengolahan Soal PG

(39)

Input Data soal PG

Output Info soal materi

Destination Admin

Logika Proses 1. Sistem menampilkan halaman olah soal PG. 2. Admin dapat melihat data soal PG.

3. Admin dapat mencari data soal PG. 4. Admin dapat menambah data soal PG. 5. Admin dapat mengubah data soal PG. 6. Admin dapat menghapus data soal PG.

5

No. Proses 5

Nama Proses Pengolahan Soal Vocabulary Source (sumber) Admin

Input Data soal vocabulary Output Info soal vocabulary Destination Admin

Logika Proses 1. Sistem menampilkan halaman olah soal vocabulary. 2. Admin dapat melihat data soal vocabulary.

3. Admin dapat mencari data soal vocabulary. 4. Admin dapat menambah data soal vocabulary. 5. Admin dapat mengubah data soal vocabulary. 6. Admin dapat menghapus data soal vocabulary.

6

No. Proses 6

Nama Proses Lihat Beranda

Source (sumber) Siswa

Input

Output Info beranda

Destination Siswa

Logika Proses 1. Sistem menampilkan halaman lihat beranda. 2. Siswa melihat tampilan lihat beranda.

7

No. Proses 7

Nama Proses Lihat Materi

Input Data jawaban PG

Output Info menu materi, Info isi materi, Info soal PG, Info score Destination Siswa

Logika Proses 1. Sistem menampilkan halaman lihat materi. 2. Siswa melihat menu materi.

3. Siswa melihat isi materi. 4. Siswa melihat soal PG. 5. Siswa melihat score.

(40)

Nama Proses Lihat Latihan

Input Data jawaban vocabulary

Output Info menu materi, Info soal vocabulary, Info score Destination Siswa

Logika Proses 1. Sistem akan menampilkan halaman lihat latihan. 2. Siswa melihat menu materi.

3. Siswa melihat soal latihan. 4. Siswa melihat score.

9

No. Proses 2.1

Nama Proses Tambah Menu Materi

Destination Admin

Logika Proses 1. Sistem menampilkan form tambah data menu materi. 2. Admin memasukkan data menu materi.

3. Jika sebagian field belum terisi, maka keluar pesan kesalahan “data harus terisi semua” dan kembali ke proses ke 2.

4. Jika semua field sudah terisi, sistem akan menyimpan data menu materi ke dalam database, kemudian data tersebut ditampilkan di halaman olah menu materi.

10

No. Proses 2.2

Nama Proses Ubah Menu Materi

Destination Admin

Logika Proses 1. Cari data menu materi yang akan di ubah. 2. Data yang di cari di temukan.

3. Pilih button ubah, maka keluar pesan “Anda yakin akan mengubah menu tersebut?”.

4. Jika tidak, maka kembali ke halaman menu materi. 5. Jika ya, sistem menampilkan form ubah data menu materi. 6. Admin mengubah sebagian atau semua field pada data menu

materi.

7. Jika salah satu field di kosongkan, maka keluar pesan kesalahan “data harus terisi semua” dan kembali ke proses ke 6.

8. Jika semua field sudah terisi atau salah satu field sudah di ubah, sistem akan menyimpan data menu materi ke dalam

(41)

11

No. Proses 2.3

Nama Proses Hapus Menu Materi

Destination Admin

Logika Proses 1. Cari data menu materi yang akan di hapus. 2. Data yang di cari di temukan.

3. Pilih button hapus, maka keluar pesan “Anda yakin akan

menghapus menu tersebut?”.

4. Jika tidak, maka kembali ke halaman menu materi. 5. Jika ya, maka data menu materi terhapus dari database.

12

No. Proses 2.4

Nama Proses Cari Menu Materi

Destination Admin

Logika Proses 1. Masukkan data pada textarea pencarian. 2. Sistem akan melakukan pencarian data.

3. Jika di temukan, sistem akan menampilkan data tersebut dalam bentuk tabel.

13

No. Proses 3.1

Nama Proses Tambah Isi Materi

Destination Admin

Logika Proses 1. Sistem menampilkan form tambah data isi materi. 2. Admin memasukkan data isi materi.

4. Jika semua field sudah terisi, sistem akan menyimpan data menu materi ke dalam database, kemudian data tersebut ditampilkan di halaman olah isi materi.

14

No. Proses 3.2

Nama Proses Ubah Isi Materi

(42)

Logika Proses 1. Cari data isi materi yang akan di ubah. 2. Data yang di cari di temukan.

3. Pilih button ubah, maka keluar pesan “Anda yakin akan

mengubah isi materi tersebut?”.

4. Jika tidak, maka kembali ke halaman isi materi. 5. Jika ya, sistem menampilkan form ubah data isi materi. 6. Admin mengubah sebagian atau semua field pada data isi

materi.

8. Jika semua field sudah terisi atau salah satu field sudah di ubah, sistem akan menyimpan data menu materi ke dalam

database, kemudian data tersebut ditampilkan di halaman olah isi materi.

15

No. Proses 3.3

Nama Proses Hapus Isi Materi

Destination Admin

Logika Proses 1. Cari data menu materi yang akan di hapus. 2. Data yang di cari di temukan.

menghapus menu tersebut?”.

4. Jika tidak, maka kembali ke halaman menu materi. 5. Jika ya, maka data menu materi terhapus dari database.

16

No. Proses 3.4

Nama Proses Cari Isi Materi

Destination Admin

17

No. Proses 4.1

Nama Proses Tambah Data Soal PG

Input Data soal_PG

Output Info soal_PG

(43)

Logika Proses 1. Sistem menampilkan form tambah data soal PG. 2. Admin memasukkan data soal PG.

4. Jika semua field sudah terisi, sistem akan menyimpan data soal PG ke dalam database, kemudian data tersebut ditampilkan di halaman olah soal PG.

18

No. Proses 4.2

Nama Proses Ubah Data Soal PG

Destination Admin

Logika Proses 1. Cari data soal PG yang akan di ubah. 2. Data yang di cari di temukan.

3. Pilih button ubah, maka keluar pesan “Anda yakin akan

mengubah soal PG tersebut?”.

4. Jika tidak, maka kembali ke halaman soal PG. 5. Jika ya, sistem menampilkan form ubah data soal PG. 6. Admin mengubah sebagian atau semua field pada data soal

PG.

8. Jika semua field sudah terisi atau salah satu field sudah di ubah, sistem akan menyimpan data soal PG ke dalam

database, kemudian data tersebut ditampilkan di halaman olah soal PG.

19

No. Proses 4.3

Nama Proses Hapus Data Soal PG

Destination Admin

Logika Proses 1. Cari data soal PG yang akan di hapus. 2. Data yang di cari di temukan.

menghapus soal PG tersebut?”.

4. Jika tidak, maka kembali ke halaman soal PG. 5. Jika ya, maka data soal PG terhapus dari database.

20

No. Proses 4.4

Nama Proses Cari Data Soal PG

(44)

Destination Admin

21

No. Proses 5.1

Nama Proses Tambah Data Soal Vocabulary Source (sumber) Admin

Logika Proses 1. Sistem menampilkan form tambah data soal vocabulary. 2. Admin memasukkan data soal vocabulary.

4. Jika semua field sudah terisi, sistem akan menyimpan data soal vocabulary ke dalam database, kemudian data tersebut ditampilkan di halaman olah soal vocabulary.

22

No. Proses 5.2

Nama Proses Ubah Data Soal Vocabulary Source (sumber) Admin

Logika Proses 1. Cari data soal vocabulary yang akan di ubah. 2. Data yang di cari di temukan.

3. Pilih button ubah, maka keluar pesan “Anda yakin akan mengubah soal vocabularytersebut?”.

4. Jika tidak, maka kembali ke halaman soal vocabulary. 5. Jika ya, sistem menampilkan form ubah data soal

vocabulary.

6. Admin mengubah sebagian atau semua field pada data soal

vocabulary.

8. Jika semua field sudah terisi atau salah satu field sudah di ubah, sistem akan menyimpan data soal vocabulary ke dalam database, kemudian data tersebut ditampilkan di halaman olah soal vocabulary.

(45)

Nama Proses Hapus Data Soal Vocabulary Source (sumber) Admin

Logika Proses 1. Cari data soal vocabulary yang akan di hapus. 2. Data yang di cari di temukan.

menghapus soal vocabularytersebut?”.

4. Jika tidak, maka kembali ke halaman soal vocabulary. 5. Jika ya, maka data soal vocabulary terhapus dari database.

24

No. Proses 5.4

Nama Proses Hapus Data Soal Vocabulary Source (sumber) Admin

25

No. Proses 7.1

Nama Proses Lihat Menu Materi

Input

Destination Siswa

Logika Proses 1. Sistem menampilkan halaman lihat materi. 2. Siswa dapat melihat menu materi.

26

No. Proses 7.2

Nama Proses Lihat Isi Materi

Input

Destination Siswa

Logika Proses 1. Sistem menampilkan halaman lihat materi. 2. Siswa dapat melihat isi materi.

27

No. Proses 7.3

(46)

Input Data jawaban PG

Output Info soal_PG, info score Destination Siswa

Logika Proses 1. Sistem menampilkan soal PG yang terdapat pada halaman lihat materi.

2. Siswa menjawab soal PG.

3. Sistem akan melakukan pengecekan jawaban. 4. Jika jawaban benar, maka akan mendapatkan nilai. 5. Jika jawaban salah, tidak akan mendapatkan nilai.

6. Sistem akan melakukan penghitungan score “(jawaban

benar * 100) / jumlah soal”.

7. Sistem akan menampilkan score akhir.

28

No. Proses 8.1

Nama Proses Lihat Menu Materi

Input

Destination Siswa

Logika Proses 1. Sistem menampilkan halaman lihat latihan.

2. Siswa dapat melihat menu materi/menu soal voacabulary.

29

No. Proses 8.2

Nama Proses Mengerjakan Soal Vocabulary dan Menghitung Score Source (sumber) Siswa

Input Data jawaban vocabulary Output Info soal vocabulary, info score Destination Siswa

Logika Proses 1. Sistem menampilkan soal latihan vocabulary yang terdapat pada halaman lihat latihan.

2. Siswa menjawab soal latihan vocabulary melalui suara pengucapan.

3. Sistem mengkonversi suara ke teks dengan bantuan Google API.

4. Setelah suara di ubah menjadi teks, sistem akan melakukan pengecekan jawaban.

5. Jika jawaban benar, maka akan mendapatkan nilai. 6. Jika jawaban salah, tidak akan mendapatkan nilai.

7. Sistem akan melakukan penghitungan score “(jawaban

benar * 100) / jumlah soal”.

(47)

3.6.4 Kamus Data

Kamus data merupakan sebuah daftar yang tersusun dari elemen data yang berhubungan dengan sistem. Kamus data dibuat berdasarkan arus data yang ada di data flow diagram. Berikut kamus data dapat dilihat pada tabel 3.9.

Tabel 3.9 Kamus Data

1

Nama Data login

Where used / how used Proses 1 Login

Deskripsi Validasi username dan password administrator Struktur data username + userpass + nama + photo

username

Nama Data menu materi

Where used / how used 1. Proses 2 Pengolahan Menu Materi 2. Proses 7 Lihat Materi

3. Proses 2.1 Tambah Menu Materi 4. Proses 2.2 Ubah Menu Materi 5. Proses 2.3 Hapus Menu Materi 6. Proses 2.4 Cari Menu Materi

Deskripsi Data ini digunakan untuk mengklasifikasikan data isi materi, soal PG dan soal vocabulary.

Struktur data mn_materi_id + judul_mn_materi + deskripsi + publish

mn_materi_id

Where used / how used 1. Proses 3 Pengolahan Isi Materi 2. Proses 7 Lihat Materi

3. Proses 3.1 Tambah Isi Materi 4. Proses 3.2 Ubah Isi Materi 5. Proses 3.3 Hapus Isi Materi 6. Proses 3.4 Cari Isi Materi

Deskripsi Data ini digunakan untuk mengolah data isi materi.

Struktur data isi_materi_id + mn_materi_id + isi_materi_x + deskripsi

(48)

4

Nama Data soal_PG

Where used / how used 1. Proses 4 Pengolahan Soal PG 2. Proses 7 Lihat Materi

3. Proses 4.1 Tambah Data Soal PG 4. Proses 4.2 Ubah Data Soal PG 5. Proses 4.3 Hapus Data Soal PG 6. Proses 4.4 Cari Data Soal PG

Deskripsi Data ini digunakan untuk mengolah data soal PG.

Struktur data id_soal_pg + mn_materi_id + pertanyaan + pilihan_a + pilihan_b + pilihan_c + pilihan_d + jawaban + publish

soal_pg_id

Nama Data soal vocabulary

Where used / how used 1. Proses 5 Pengolahan Soal Vocabulary

2. Proses 8 Lihat Latihan

3. Proses 5.1 Tambah Data Soal Vocabulary

4. Proses 5.2 Ubah Data Soal Vocabulary

5. Proses 5.3 Hapus Data Soal Vocabulary

6. Proses 5.4 Cari Data Soal Vocabulary

Deskripsi Data ini digunakan untuk mengolah data soal

vocabulary.

Struktur data soal_vocab_id + mn_materi_id + pertanyaan + kunci_jawaban + publish

soal_pg_id

Where used / how used 1. Proses 7 Lihat Materi

2. Proses 7.3 Mengerjakan Soal PG dan Menghitung

Score

Deskripsi Data ini digunakan untuk menjawab data soal PG.

Struktur data pilihan_a + pilihan_b + pilihan_c + pilihan_d

(49)

7

Nama Data jawaban vocabulary

Where used / how used 1. Proses 8 Lihat Latihan

2. Proses 8.2 Mengerjakan Soal Vocabulary dan Menghitung Score

Deskripsi Data ini digunakan untuk menjawab data soal

vocabulary.

Struktur data kunci_jawaban

kunci_jawaban {A-Z | a-z}

3.7 Perancangan Sistem

Perancangan sistem merupakan penggambaran, perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah kedalam satu kesatuan yang utuh dan berfungsi.

3.7.1 Perancangan Basis Data

Perancangan data terdiri dari skema dan struktur tabel yang terdapat pada ERD dari media pembelajaran bahasa Inggris.

3.7.1.1Skema Relasi

(50)

menu_materi

Gambar 3.10 Skema Relasi 3.7.2 Struktur Tabel

Tabel-tabel yang terdapat dalam basis data yang digunakan dalam sistem yang akan dibangun adalah sebagai berikut:

Struktur tabel admin dapat dilihat pada tabel 3.10. Tabel 3.10Struktur tabel admin

Nama Field Tipe Data Key Keterangan

username Varchar (50) PK Primary Key

userpass Varchar (50)

nama Varchar (50)

photo Varchar (50)

Struktur tabel menu_materi dapat dilihat pada tabel 3.11. Tabel 3.11Struktur tabel menu_materi

mn_materi_id Integer (3) PK Primary Key

judul_mn_materi Varchar (50)

deskripsi Varchar (50)

(51)

Struktur tabel isi_materi dapat dilihat pada tabel 3.12. Tabel 3.12Struktur tabel isi_materi

isi_materi_id Integer (3) PK Primary Key

mn_materi_id Integer (3) FK Foreign Key dari tabel menu materi, ke field mn_materi_id

isi_materi_x Text

deskripsi Varchar (50)

Struktur tabel soal_vocab dapat dilihat pada tabel 3.13. Tabel 3.13Struktur tabel soal_vocab

soal_vocab_id Integer (3) PK Primary Key

mn_materi _id Integer (3) FK Foreign Key dari tabel menu

vocabulary, ke field mn_materi_id kunci_jawaban Varchar (50)

publish Enum (‘Yes’,’No’)

Struktur tabel soal_pg dapat dilihat pada tabel 3.14. Tabel 3.14Struktur tabel soal_pg

soal_pg_id Integer (3) PK Primary Key

mn_materi _id Integer (3) FK Foreign Key dari tabel menu materi, ke field mn_materi_id pertanyaan Varchar (200)

pilihan_a Varchar (200)

pilihan_b Varchar (200)

pilihan_c Varchar (200)

pilihan_d Varchar (200)

kunci_jawaban Varchar (200)

(52)

3.7.3 Perancangan Struktur Menu

Perancangan struktur menu berisikan menu dan submenu yang berfungsi memudahkan pengguna didalam menggunakan sistem. Berikut ini gambaran mengenai struktur menu media pembelajaran bahasa Inggris.

Pada gambar 3.11 merupakan gambar struktur menu administrator.

Login

Olah Menu Materi Olah Isi Materi Olah Soal PG

Tambah Menu

Gambar 3.11 Struktur Menu Administrator Pada gambar 3.12 merupakan gambar struktur menu siswa.

Index

(53)

3.7.4 Perancangan Antarmuka

Tahap perancangan antarmuka dilakukan untuk merancang antarmuka agar dapat digunakan oleh pengguna baik admin maupun siswa yang menggunakan media pembelajaran ini. Perancangan antarmuka pada media pembelajaran ini adalah sebagai berikut:

3.7.4.1Perancangan Antarmuka Administrator Berikut ini antarmuka untuk administrator.

1. Login Admin (A01), dapat dilihat pada gambar 3.13.

(54)

2. Menu Materi (A02), dapat dilihat pada gambar 3.14.

Gambar 3.14 Antarmuka Menu Materi 3. Isi Materi (A03), dapat dilihat pada gambar 3.15.

(55)

4. Soal Pilihan Ganda (A04), dapat dilihat pada gambar 3.16.

Gambar 3.16 Antarmuka Soal Pilihan Ganda 5. Soal Vocabulary (A05), dapat dilihat pada gambar 3.17.

(56)

6. Tambah Menu Materi (A06), dapat dilihat pada gambar 3.18.

Gambar 3.18 Antarmuka Tambah Menu Materi 7. Tambah Isi Materi (A07), dapat dilihat pada gambar 3.19.

(57)

8. Tambah Soal Pilihan Ganda (A08), dapat dilihat pada gambar 3.20.

Gambar 3.20 Antarmuka Tambah Soal Pilihan Ganda 9. Tambah Soal Vocabulary (A09), dapat dilihat pada gambar 3.21.

(58)

10. Ubah Menu Materi (A10), dapat dilihat pada gambar 3.22.

Gambar 3.22 Antarmuka Ubah Menu Materi 11. Ubah Isi Materi (A11), dapat dilihat pada gambar 3.23.

(59)

12. Ubah Soal Pilihan Ganda (A12), dapat dilihat pada gambar 3.24.

Gambar 3.24 Antarmuka Ubah Soal Pilihan Ganda 13. Ubah Soal Vocabulary (A13), dapat dilihat pada gambar 3.25.

(60)

3.7.4.2Perancangan Antarmuka Siswa Berikut ini antarmuka untuk siswa.

1. Halaman Beranda (B01), dapat dilihat pada gambar 3.26.

Gambar 3.26 Antarmuka Halaman Beranda 2. Halaman Materi (B02), dapat dilihat pada gambar 3.27.

(61)

3. Halaman Latihan (B03), dapat dilihat pada gambar 3.28.

Gambar 3.28 Antarmuka Halaman Latihan 3.7.4.3Perancangan Pesan

Perancangan pesan merupakan tampilan dari suatu perangkat lunak yang berfungsi untuk menyampaikan pesan atau informasi kepada pengguna agar perangkat lunak lebih interaktif. Perancangan pesan dapat dilihat pada gambar 3.29.

Anda belum mengisikan Username atau Password.

M01

Ok

Data harus terisi semua.

M02

Ok

Anda yakin akan menghapus data tersebut?

M03

Cancel Ok

Anda yakin akan mengubah data tersebut?

M04

(62)

Anda telah keluar dari halaman administrator

M05

Ok

LOGIN GAGAL

Username atau Password Anda tidak sesuai.

M06

Kembali

Score jawaban yang kamu dapatkan : Benar = .... soal x 10 point Salah = .... soal

Kosong = .... soal Score = .... point

M07

x

Silahkan scroll ke bawah!

M08

Ok

Klik "Allow" pada browser untuk menggunakan mikrofon

M09

Bicaralah secara perlahan dan jelas

M10

Gambar 3.29 Perancangan Pesan 3.7.4.4Jaringan Semantik

(63)

1. Jaringan Semantik Administrator, dapat dilihat pada gambar 3.30.

A01

A02 A03 A04 A05

A06 A07 A08 A09

A11 A12 A13

Gambar 3.30 Jaringan Semantik Administrator 2. Jaringan Semantik Siswa, dapat dilihat pada gambar 3.31.

B01

(64)

3.7.5 Perancangan Prosedural

Sebagai langkah terakhir dalam perancangan yaitu perancangan prosedural yang akan diimplementasikan ke dalam sistem. Prosedural ini akan digunakan sebagai algoritma dasar dalam mengkodekan prosedur yang ada.

1. Prosedur Login Admin, dapat dilihat pada gambar 3.32.

Menampilkan menu administrator Mulai

Apakah username & password sudah

benar? Masukkan username dan

password

Cek username dan password

Menampilkan

pesan gagal login Tidak Ya Selesai