RANCANG BANGUN MEDIA INTERAKTIF ALAT BANTU AJAR DAN KAMUS BAHASA PADANG BERBASIS WEB Rizal Rachmanyah1, M. Zen Hadi S.2, Haryadi Amran D.3 Politeknik Elektronika Negeri Surabaya, Jurusan Teknik Telekomunikasi 2 Laboratorium Digital Communication, Politeknik Elektronika Negeri Surabaya 3 Laboratorium Multimedia, Politeknik Elektronika Negeri Surabaya Institut Teknologi Sepuluh Nopember,Kampus ITS,Surabaya 6011 e-mail : [email protected] 1

Abstrak - Dewasa ini perkembangan teknologi informasi dan teknologi komputer berkembang dengan pesat. Kebutuhan akan sebuah layanan berbasis online pun semakin diminati oleh semua kalangan masyarakat, baik pelajar maupun pekerja. Tapi sayangnya, tidak semua informasi yang didapatkan ditulis dalam bahasa yang dapat dimengerti. Untuk itu, pengguna Internet perlu memanfaatkan layanan terjemahan online. Hanya saja, kebanyakan aplikasi terjemahan online saat ini jarang sekali terdapat layanan terjemahan Bahasa Daerah. Maka penulis telah membuat suatu Media Interaktif berbasis web yang berisi Kamus Bahasa Padang yang disertai preview suara cara pengucapannya, Di dalam proyek akhir ini telah diperoleh hasil dari beberapa pengujian rata-rata waktu pengaksesan Media Interaktif Bahasa Padang yaitu pada Menu Utama membutuhkan waktu sekitar 6 detik, Menu Akses Kamus membutuhkan waktu 2 detik, Menu Akses Padang E-Learning yang hanya berisi Text membutuhkan waktu 1 detik, Menu Akses Padang E-Learning yang berisi Text dan Gambar membutuhkan waktu 8 detik, Menu Akses Padang ELearning yang berisi Text dan Slideshow Flash membutuhkan waktu 27 detik, Menu Akses Audio Streaming yang membutuhkan waktu 21 detik, serta Menu Akses menuju Video Streaming membutuhkan waktu buffer 3 menit untuk akses video ukuran file 7 MB. Dari hasil pengujian diharapkan dapat memberikan informasi kepada para masyarakat, khususnya yang ingin mempelajari lebih dalam tentang kebudayaan provinsi Sumatera Barat ini.

Kata Kunci - Kamus Padang, PHP, MySql, HTML 1.

PENDAHULUAN

Terjemahan Online merupakan layanan yang memungkinkan pengguna menerjemahkan kata asing ke dalam bahasa yang lebih dapat dimengerti. Kini, sudah banyak penyedia-penyedia layanan Terjemahan Online seperti Google Translate yang dapat menerjemahkan berbagai macam bahasa. Hanya saja, kebanyakan aplikasi terjemahan online saat ini hanya mampu menerjemahkan berbagai macam Bahasa Asing saja, tetapi jarang sekali terdapat layanan terjemahan Bahasa Daerah, seperti Bahasa Padang atau Bahasa Daerah lainnya. Padahal, Bahasa Daerah merupakan bahasa ibu yang harus dijaga dan dilestarikan keberadaannya. Melihat permasalahan diatas terlebih juga sulitnya menemukan sebuah Aplikasi Kamus Bahasa Padang berbasis online saat ini, maka penulis telah membuat suatu Media Interaktif berbasis web yang berisi Kamus Bahasa Padang yang disertai preview suara cara pengucapannya, yang disisipkan Media Bantu Ajar yang berisi berbagai macam hal yang berhubungan dengan Sumatera Barat baik itu sejarah, adat istiadat, maupun informasi lokasi-lokasi menarik disana, sehingga dapat membantu masyarakat semua

kalangan yang ingin mempelajari lebih dalam tentang kebudayaan provinsi Sumatera Barat. 2.

LANDASAN TEORI

2.1 Aplikasi Web Aplikasi Web atau bisa disebut juga dengan perangkat lunak berbasis Web telah berkembang dengan pesat baik dari segi penggunaan, ukuran, bahasa yang digunakan dan kompleksitasnya. Aplikasi web pada mulanya hanya berupa situs Web yang bersifat statis dan navigated oriented, serta lebih banyak digunakan sebagai brosur produk atau profil perusahaan online. Pada saat ini aplikasi Web telah banyak yang bersifat dinamis, interaktif dan task oriented untuk digunakan dalam sistem informasi, telekomunikasi, perdagangan, perbankan dan lain-lain. 2.2 Browser Browser adalah software yang biasa digunakan untuk mengakses ke Internet. Beberapa browser yang sudah dikenal adalah Microsoft Internet explorer, Mozilla Firefox, Google Chrome, Safari, maupun Opera. Pada browser terdapat bagian yang dinamakan baris alamat atau address bar. Pada bagian inilah

1

pemakai mengetikkan alamat situs suatu web, misalnya “www.google.com” dan sebagainya. 2.2 Web Server Web server adalah suatu software yang bertindak melayani pengaksesan aplikasi web. Contoh software yang berfungsi sebagai web server antara lain Apache, IIS, dan Xitami. Perangkat lunak ini biasa dipasang pada computer yang berkedudukan sebagai server. Server ini terhubung ke Internet dan hidup selama 24 jam sehingga pengaksesan dapat dilakukan kapan saja dan dimaana saja. Namun sebenarnya computer apapun bisa dijadikan sebagai web server untuk kepentingan pembuatan aplikasi web dan tidak perlu terhubung ke jaringan computer, apalagi terhubung ke Internet. Sebuah PC dapat berkedudukan sebagai server web dan sekaligus sebagai klien untuk mengakses aplikasi web yang ada di dalamnya. 2.3 HTML (HyperText Markup Language) Pengaturan format teks dan pembentukan link dilakukan terhadap obyeknya langsung dengan ditandai oleh tag-tag HTML, seperti terlihat pada contoh berikut :

ini adalah bagian tubuh dikumen. Semua yang ditulis di sini akan ditampilkan ke layar browser HTML diatur oleh Konsorsium WWW (W3C). Semua perubahan atas standar bahasa HTML harus disahkan terlebih dahulu oleh konsorsium ini. Sejauh ini, HTML telah mengalami berbagai revisi sepanjang hidupnya. Standart paling akhir yang sekarang diperkenalkan adalah standar HTML 4.0, yang mendukung antara lain CSS (cascading style sheet), dynamic content positioning (penempatan isi secara dinamis), downloadable font (jenis font yang biasa didownload otomatis) dan sebagainya. 2.3.1 Penulisan Tag HTML Adapun aturan dalam penulisan tag adalah selalu diapit oleh tanda kurung siku miring <....>. Beberapa tag yang biasa digunakan dalam dokumen HTML, yaitu: ..., dipakai untuk menandai awal dan akhir file HTML. ..., dipakai untuk menandai daerah „header‟ yang berisi judul. ..., mengapit isi teks, disebut „body teks‟.

<TITLE>..., digunakan sebagai penunjuk window‟s title bar. Struktur penulisan HTML adalah: .........head dokumen.......... Seperti terlihat, struktur file HTML diawali dengan sebuah tag dan ditutup dengan tag .............body . Di dalam tagdokumen.............. ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag ... dan tag .... Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <TITLE>... yang berfungsi untuk mengeluarkan judul pada title bar window web browser. Bagian yang diapit oleh tag BODY akan ditampilkan pada halaman web browser. Tag–tag lain yang akan digunakan pada tampilan program Proyek Akhir ini adalah:

2.4 PHP (Hypertext Preprocessor) PHP (Hypertext Preprocessor) adalah sebuah bahasa scripting yang terpasang pada HTML. Sebagian besar sintaks mirip dengan bahasa C, maupun Java, ditambah beberapa fungsi PHP yang spesifik. Tujuan utama bahasa ini adalah untuk memungkinkan perancang web untuk menulis halaman web dinamik dengan cepat. Seluruh aplikasi berbasis web dapat dibuat dengan PHP. Namun kekuatan yang paling utama PHP adalah pada konektivitasnya dengan sistem database di dalam web. 2.4.1 Membuka Koneksi Server ke Mysql mysql_connect() Digunakan untuk melakukan uji dan koneksi kepada server database MySQL. Sintaks : $conn = mysql_connect (”host”,”username”,”password”);

 $conn adalah nama variabel penampung status hasil koneksi kepada database.  host adalah nama host atau alamat server database MySQL.  username adalah nama user yang telah diberi hak untuk dapat mengakses server database.  password adalah kata sandi untuk username untuk dapat masuk ke dalam database.

2

2.4.2 Memilih Database yang Digunakan mysql_select_db() Digunakan untuk melakukan koneksi kepada database yang dalam server yang berhasil dikoneksi dengan perintah mysql_connect(). Sintaks : $pilih = mysql_select_db(”namadatabase”,$conn);

 $pilih berisi status koneksi kepada database.  $conn merupakan koneksi kepada server database yang berhasil.  namadatabase adalah nama database yang akan dikenai proses. 2.4.3 Memanggil Query Dari Suatu Database mysql_query() Digunakan untuk melakukan eksekusi perintah SQL untuk memanipulasi database yang berhasil dilakukan koneksinya menggunakan mysql_select_db(). Sintaks : $hasil = mysql_query(”SQL Statement”);

 hasil akan berupa record set apabila SQL Statement berupa perintah select. 2.4.4 Memanggil Record Dari Database mysql_fetch_array() Digunakan untuk melakukan pemrosesan hasil query yang dilakukan dengan perintah mysql_query(), dan memasukkannya ke dalam array asosiatif, array numeris atau keduanya. Sintaks :

 mysql_num_rows() Fungsi ini digunakan untuk menghitung jumlah record yang ada pada database. Sintaks : $jml = mysql_num_rows($hasil);

3.

METODOLOGI

3.1 Perencanaan Sistem

Gambar 3.1 Blok Diagram Sistem Web User Pada gambar diatas web server membuat Media Interaktif yang berisi Kamus Bahasa Padang yang disertai berbagai macam fitur seperti ELearning Padang, Forum, Buku Tamu, serta Aplikasi Streaming yang dapat diakses oleh user. Akses informasi Media interaktif ini hanya dapat dilakukan jika terhubung dengan Local Area Network (LAN). 3.2 Flow Chart Perencanaan Sistem

$row = mysql_fetch_array($hasil);

 $row adalah array satu record dari record $hasil yang diproses nomor record sesuai dengan nomor urut dari proses mysql_fetch_array yang sedang dilakukan.  $hasil adalah record set yang akan diproses  mysql_fetch_assoc() Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja array yang dihasilkan hanya array asosiatif. Sintaks : $row = mysql_fetch_assoc($hasil);

 mysql_fetch_row() Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja array yang dihasilkan hanya array numeris. Sintaks : $row = mysql_fetch_row($hasil);

Gambar 3.2 Flow Chart Perencanaan Sistem

3

3.1 Site Map User Media Interaktif

apapun yang ada pada seluruh media Interaktif ini. Yang kedua adalah User Terdaftar, dimana golongan ini dapat mengakses seluruh fitur yang ada di Aplikasi ini mulai dari Aplikasi Kamus, ELearning Padang, Forum Komunitas, Form Buku Tamu, Gallery Foto, maupun Aplikasi Audio serta Video Streaming. Yang ketiga adalah User Guest, dimana golongan ini hanya dapat mengakses fitur Kamus Bahasa Padang-Indonesia, Indonesia-Padang saja, dan tidak dapat mengakses fitur-fitur yang lain. 4.

Gambar 3.3 Site Map User Client

PEMBUATAN SISTEM Langkah-langkah yang dilakukan dalam pembuatan Sistem Media Interaktif Minang Web dan Buku Tamu adalah sebagai berikut: 1. Instalasi Web Server dan Web Editor Web Server yang digunakan pada Tugas Akhir ini menggunakan XAMPP, dan Tool Web Editor Notepad++ 2. Pembuatan Database Kamus, Learning, Login, Streaming serta Informasi Lainnya menggunakan PHPMyAdmin yang sudah merupakan satu paket dengan Web Server XAMPP. 3. Pembuatan Aplikasi Kamus Bahasa (Baik Dari Sisi Admin dan Sisi Client) 4. Pembuatan Aplikasi Padang E-Learning (Baik Dari Sisi Admin dan Sisi Client) 5. Pembuatan Aplikasi Gallery (Baik Dari Sisi Admin dan Sisi Client) 6. Pembuatan Aplikasi Forum (Baik Dari Sisi Admin dan Sisi Client) 7. Pembuatan Aplikasi Audio Streaming (Baik Dari Sisi Admin dan Sisi Client) 8. Pembuatan Aplikasi Video Streaming (Baik Dari Sisi Admin dan Sisi Client) 9. Pembuatan Buku Tamu (Baik Dari Sisi Admin dan Sisi Client) 5.

Gambar 3.4 Site Map User Admin Dari siet map User Media Interaktif diatas dapat dijelaskan bahwa Pengguna Aplikasi ini terbagi dalam tiga kategori, pertama Admin yang dapat mengakses, merubah, menghapus, ataupun mengedit

PENGUJIAN DAN ANALISA Pada proyek akhir ini dilakukan pengujian terhadap sistem yang telah dibuat. Kemudian dari hasil pengujian tersebut, dilakukan analisa data yang telah diperoleh. Website yang dibuat merupakan website mengenai Media Interaktif Alat Bantu Ajar dan Kamus Bahasa Padang berbasis web. Penggunaan Aplikasi ini terbagi dalam tiga kategori, pertama Admin yang dapat mengakses, merubah, menghapus, ataupun mengedit apapun yang ada pada seluruh media Interaktif ini. Yang kedua adalah User Terdaftar, dimana golongan ini dapat mengakses seluruh fitur yang ada di Aplikasi ini mulai dari Aplikasi Kamus, E-Learning Padang, Forum Komunitas, Buku Tamu, Gallery Foto, maupun Aplikasi Audio serta Video Streaming. Yang ketiga

4

adalah User Guest, dimana golongan ini hanya dapat mengakses fitur Kamus saja, dan tidak dapat mengakses fitur-fitur yang lain. Untuk dapat masuk ke menu User Terdaftar maka harus mempunyai account yang digunakan untuk login. Kalaupun user belum mempunyai account maka ia dipersilahkan untuk meregistrasikan diri menjadi member Minang Society. Setelah user berhasil melakukan registrasi dan melakukan login, maka akan dapat mengakses fitur-fitur tambahan seperti padang E-Learning, Forum, dan lain sebagainya. Sehingga, untuk pengujian website kali ini dilakukan dalam beberapa kondisi, yaitu : Keberhasilan user atau client melakukan registrasi untuk menjadi member dan mengakses fitur member Keberhasilan user atau client melakukan login Analisa Rata-Rata Waktu Eksekusi yang Dibutuhkan untuk Akses Informasi pada Web a.

Dari data yang didapat pada tabel pengujian login dapat dianalisa bahwa penggunaan huruf besar ataupun kecil sangat berpengaruh pada proses login, pada dari struktur sintax php telah disetting fungsi „case sensitif’ sehingga inputannya harus sama dengan apa yang telah dituliskan sebelumnya. Jika pada proses login terjadi kesalahan, maka akses Home Member tidak dapat ditampilkan c.

Analisa Rata-Rata Waktu Eksekusi yang Dibutuhkan untuk Akses Informasi pada Web. Rata-Rata Waktu Pengaksesan pada Menu Utama

Pengujian Keberhasilan Regitrasi User

Tabel diatas merupakan pengujian inputan dari form register, terlihat bahwa terjadi dua kondisi Berhasil dan Gagal. Dari kondisi Gagal terlihat bahwa user bernama Ratih lupa untuk mengisi nama depannya saat melakukan pengisian Form, sedangkan user bernama lukman salah dalam mengkonfirmasi passwordnya. Hal tersebut dapat menyebabkan factor kegagalan pengisian form, sehingga proses registrasi tidak dapat dilanjutkan, dan data tidak dapat masuk ke dalam database. Pengujian Keberhasilan Login Member Setelah dilakukan register, selanjutnya melakukan pengecekan pada login untuk masuk ke Member Media Interaktif.

Dari Data Grafik menunjukkan waktu eksekusi pengaksesan pada Halaman Awal Pilih Mode situs Dengan Flash atau Tanpa Flash, dimana untuk menampilkan menu yang merupakan gabungan dari file gambar hanya dibutuhkan waktu sekitar enam menit untuk client meload gambar dari server. Rata-Rata Waktu Akses Menu Kamus

b.

Dari Data Grafik menunjukkan waktu eksekusi pengaksesan pada menu Kamus, terlihat bahwa client hanya membutuhkan waktu sekitar 2 detik untuk server melakukan searching database, kata apa yang client cari, sampai menampilkannya lagi ke sisi Client hasil translatenya beserta preview suaranya.

5

Rata-Rata Waktu Akses Video Streaming

semakin besar besar file sourcenya, maka waktu yang dibutuhkan akan semakin lama. Faktor lain yang dapat mempengaruhi waktu proses pengiriman adalah koneksi dari ISP yang digunakan. 6.

Dari Data Grafik, yaitu pada proses pengaksesan untuk video streaming dengan menggunakan sample video berdurasi 5:47 dan mempunyai ukuran file sebesar 7,19 MB. Dari tabel yang ada dapat dianalisa bahwa untuk proses buffering video, Client membutuhkan waktu sekitar tiga menit untuk dapat mengakses streaming video secara lancar untuk satu file video berdurasi lima menit. Rata-Rata Waktu Akses Audio Streaming

Dari Data Grafik dapat dianalisa bahwa untuk proses streaming audio, Client hanya membutuhkan waktu sekitar dua puluh satu detik untuk dapat akses streaming audio secara lancar untuk satu file audio berukuran 4MB. Lama Waktu Upload Data ke Server

Dari Data Tabel dan Grafik yang dihasilkan, terlihat bahwa lama waktu yang dibutuhkan untuk user mengupload sebuah File ke server sangat tergantung dari besar source File yang akan diupload,

KESIMPULAN Setelah membuat rancang bangun RADIUS server dengan VPN ini diperoleh kesimpulan sebagai berikut : 1. Untuk keberhasilan dalam malakukan registrasi user telah sukses dibuktikan, selain itu semua data pada form registrasi dapat langsung otomatis tersimpan dalam database. 2. Adanya case sensitive yang terintegrasi pada file php saat proses login. Sehingga client harus menginputkan username dan password sama dengan apa yang mereka inputkan saat proses registrasi. 3. Pada proses Upload data, dapat disimpulkan bahwa semakin besar ukuran File yang akan diupload, maka waktu yang dibutuhkan juga akan semakin lama. 4. Rata-Rata waktu yang dibutuhkan untuk pengaksesan Media Interaktif dapat ditulis sebagai berikut: • Menu Utama membutuhkan waktu sekitar 6 detik • Menu Akses Kamus hanya membutuhkan waktu sekitar 2 detik • Menu Akses Audio Streaming membutuhkan waktu sekitar 21 detik • Menu Akses Video Streaming membutuhkan waktu buffer sekitar 3 menit untuk akses video berukuran 7 MB. 7.

DAFTAR PUSTAKA 1. M.Zen Samsono Hadi. “Modul Teori Internet Programming, Politeknik Elektronika Negeri Surabaya. 2008 2. Nur Diana, Iva, Pembuatan Web Tutorial Pengenalan Bahasa Jawa untuk Anak SD (Desain Global dan Flash Action Script), Proyek Akhir PENS-ITS, 2006. 3. Puspitosari, Heni, Having Fun With Adobe Dreaweaver CS4, Skripta Media Interaktif Yogyakarta, 2010. 4. Puspitosari, Heni, Having Fun With Adobe Flash CS4 Professional, Skripta Media Interaktif Yogyakarta, 2010. 5. Kadir, Abdul, Mudah Menjadi Programmer aJaX, YesCom Yogyakarta, 2010.

6