1. Pendahuluan Perkembangan penggunaan bahasa Mandarin membuat sebagian sekolah menengah pertama memasukan bahasa tersebut dalam kurikulum.
|
|
- Vera Kusnadi
- 6 tahun lalu
- Tontonan:
Transkripsi
1 1. Pendahuluan Perkembangan penggunaan bahasa Mandarin membuat sebagian sekolah menengah pertama memasukan bahasa tersebut dalam kurikulum. Bahkan beberapa sekolah dasar pun sudah mencantumkan bahasa Mandarin dalam kurikulum pelajarannya. Bahasa Mandarin menjadi bahasa yang sangat penting saat ini karena bahasa ini adalah salah satu bahasa internasional selain bahasa Inggris. Sebuah bahasa memiliki huruf abjad (vokal dan konsonan), misalnya bahasa Inggris atau bahasa Indonesia, begitu pula dengan bahasa Mandarin. Hal utama yang harus diperhatikan dalam pembelajaran bahasa Mandarin adalah cara pengucapann ejaannya ( 拼音 pīnyīn) yang baik dan benar sesuai dengan nada baca. Bahasa Mandarin merupakan bahasa nada, maka setiap nada atau intonasi yang berbeda memiliki arti yang berbeda pula. [1] Berdasarkan wawancara dengan guru bahasa Mandarin di SMP Kristen Satya Wacana, sebagian besar pelajar kurang paham dalam penggunaan pelafalan atau nada dalam bahasa Mandarin. Kebanyakan dari pelajar hanya mengerti abjad atau penulisannya saja, namun kurang memahami akan pelafalan nada sehingga kata yang diucapkan menjadi kurang tepat atau bahkan salah arti. Kegiatan belajar mengajar bahasa Mandarin di dalam SMP Kristen Satya Wacana hanya memakai buku sebagai panduan belajar. Cara seperti ini saja belum cukup memadai dalam membantu pelajar menyelesaikan berbagai masalah yang dialaminya. Oleh karena itu sangatlah diperlukan adanya model pembelajaran yang ideal agar dapat bermanfaat untuk pelajar. Sesuai dengan uraian pada latar belakang di atas, maka yang menjadi masalah dalam penelitian ini adalah bagaimana untuk merancang website pembelajaran bahasa Mandarin menggunakan audio yang responsive terhadap semua layar. Berdasarkan observasi siswa kelas 7 di SMP Kristen Satya Wacana, 55 dari 74 siswa sudah memiliki smartphone atau Tablet PC milik pribadi ataupun milik orangtua, 40 siswa memiliki smartphone (iphone, Blackberry dan Android Phone), 15 siswa memiliki tablet (ipad dan tablet android), sisanya mengakses internet melalui PC atau laptop. Berdasarkan hal tersebut tujuan dibuatnya aplikasi pembelajaran ini adalah untuk membantu pelajar kelas 7 SMP Kristen Satya Wacana agar dapat mengerti pelafalan nada bahasa mandarin dan meningkatkan minat belajar bahasa Mandarin. Di dalam aplikasi ini berisi pembelajaran dengan gambar dan pelafalan suara dari setiap Pīnyīn dan Hànzì yang mempermudah dalam mempelajari materi bahasa mandarin. Teknologi yang mendukung untuk membuat aplikasi tersebut adalah dengan Responsive Web Design dan HTML5. Responsive Web Design adalah pendekatan yang menunjukkan desain website harus menanggapi perilaku user dan lingkungan berdasarkan pada layar, platform ukuran dan orientasi. Sebagai contoh adalah campuran dari flexible grids dan layout, gambar dan penggunaan CSS, misalnya jika user beralih dari laptop mereka ke ipad, website secara otomatis harus beralih untuk mengubah resolusi dan ukuran gambar. Dengan memanfaatkan teknologi HTML5 yang akan diterapkan pada website ini, sehingga setiap ejaan ( 拼音 pīnyīn) Bahasa Mandarin akan dapat ditampilkan (visual) dan didengarkan (audio).
2 2. Kajian Pustaka Penelitian berjudul "Media Pembelajaran Bahasa Mandarin Berbasis Client Server Pada Sistem Operasi Android" membahas tentang aplikasi pembelajaran bahasa mandarin dengan menggunakan fasilitas multimedia digunakan dalam sistem operasi Android. Penelitian ini membahas mengenai pembuatan materi secara menarik dan kreatif, dengan menggunakan gambar, animasi dan audio. [2] Pemanfaatan Responsive Web Design dan HTML 5 dalam pengembangan website juga pernah dilakukan, salah satunya Web Responsive Design Untuk Situs Berita Menggunakan Framework Codeigniter. Penelitian ini menggunakan Responsive Web Design agar dapat menampilkan halaman situs sesuai dengan layar perangkat dan dapat mengenali setiap ukuran perangkat atau platform pengguna. Responsive Web Design membuat pengguna dengan nyaman dan mudah membaca konten isi berita tanpa harus menggeser layar kesamping.[3] Dari beberapa artikel dan penelitian ilmiah tersebut didapatkan sebuah gagasan untuk membangun sebuah website menggunakan teknologi Responsive Web Design yang dapat secara responsive berubah sesuai dengan layar perangkat mobile yang dipakai. Setiap materi yang ada dibuat dengan menarik menggunakan gambar sebagai bantuan visualisasi dan juga suara sebagai bantuan audio. Digunakan juga Teknologi HTML5 untuk menampilkan setiap file audio yang ada. Bahasa Mandarin adalah bahasa yang bernada. Pelafalan bahasa Mandarin pada dasarnya ada 4. Masing-masing menggunakan tanda nada yang dinyatakan : ˉ (nada 1), ˊ (nada 2), ˇ (nada 3), ˋ (nada 4). Nada juga dianggap sebagai bagian yang membentuk suku kata, karena nada berfungsi untuk membedakan makna dalam bahasa Mandarin. Contoh tāng, táng, tăng, tàng 4 huruf ini initial semuanya [tang], finalnya semuanya [ang], hanya karena nada berbeda, makna tentu tidak sama, masing-masing mewakili 4 sifat yang berbeda dalam bahasa Mandarin (minimal ada satuan bahasa yang bermakna), dalam penulisannya menjadi 4 huruf yang berbeda. Bagian dasar terbesar dari bahasa dalam bahasa Mandarin adalah suku kata ( 手 洗 民 失 ). suku kata dan suku kata berkombinasi menjadi kata ( 马 + 路 马路 开 + 关 开关 ). Ada suku kata yang bisa berdiri sendiri sebagai kata ( 手, 洗 ),ada suku kata yang tidak bisa berdiri sebagai kata, hanya bisa membentuk kata majemuk dengan bergabung dengan suku kata yang lain ( 民 人民 失 丧失 ). Dalam bahasa Mandarin modern proporsi sepasang suku kata merupakan yang paling besar. Sebagian besar pasangan suku kata tergantung pola majemuk pembentuknya yang terletak di depannya. Pada pelafalannya, bahasa Mandarin memiliki suku kata untuk melambangkan bunyi bunyi dalam Mandarin atau disebut Bopomofo, terbagi atas pelafalan huruf mati (konsonan) dan huruf hidup (vokal).[1] Responsive Web Design (RWD) pada dasarnya menunjukan bahwa situs website dibuat menggunakan W3C CSS3 media dengan proporsi berbasis grid, untuk beradaptasi tata letak dengan melihat lingkungan platform dan gambar fleksibel sebagai hasilnya. Pengguna di berbagai platform dan browser akan
3 memiliki akses ke satu sumber konten, ditata sehingga mudah dibaca dan navigasi dengan minimal mengubah ukuran, panning dan scrolling.[4] Responsive Web Design pertama kali diperkenalkan oleh Ethan Marcotte pada artikelnya yang sangat inspiratif "Responsive Web Design". Semakin banyaknya perangkat yang muncul dengan berbagai ukuran, maka sebuah situs perlu untuk mengenali ukuran perangkat pengguna. Ketika masih berpikir saat ada perangkat baru yang dirilis dan akan memperbarui situs agar sesuai, maka harus mencari solusi yang lebih efektif dan responsif bagaimana cara agar situs hanya mengakui lebar browser saja tanpa melakukan pembaruan yang lebih spesifik.[3] Menurut Ethan Marcotte didalam bukunya "A Book Apart", ada 3 hal yang harus dipakai agar dapat membuat design website yang Responsive yaitu : (1) The Flexible Grid, (2) The Flexible Images, (3) Media Queries. The Flexible Grid, Kerangka dasar yang fleksibel, dibentuk oleh 5 komponen yaitu Flexible Type, Flexible Containers, Flexible Margins, Flexible Padding, dan Flexible Image. Pendekatan yang paling umum untuk ukuran dalam css pada hari ini adalah dengan menggunakan pixel. Pixel dapat memberikan desainer kontrol yang tepat dan akurat dalam penggunaannya. Jika desainer ingin mengubah ukuran teks yang lebih kecil atau teks yang lebih besar berdasarkan ukuran layar, maka akan mengubah elemen css induk. Hal seperti ini biasa disebut fixed width. Tetapi karena Responsive Web Design menggunakan Flexible Grid agar dapat menyesuaikan jenis ukuran layar sesuai dengan perangkat yang dipakai, maka pixel tidak digunakan melainkan digantikan dengan ukuran ems. Flexible Images berarti setiap image yang ada didalam website tidak melebihi lebar container dari layout yang dirancang. Saat merancang desain website responsive bukan hanya tampilan layout yang harus dirancang tetapi juga harus memperhatikan bagaimana image akan ditampilkan. Dengan menuliskan aturan didalam CSS3 maka setiap image dapat menjadi flexible image. Pertama kali ditemukan oleh desainer Richard Rutter, satu aturan ini telah membuat perubahan yang sangat berguna untuk setiap gambar dalam website. Sekarang, elemen img akan cukup pada ukuran apapun yang diinginkan asalkan elemen yang terkandung itu lebih kecil dari elemen yang mengandung. Tetapi jika ternyata elemen yang terkandung lebih lebar daripada elemen yang mengandung, maka max-width:100% akan digunakan untuk memaksakan elemen yang terkandung muat dengan elemen yang mengandung. Media Queries Adalah bagian dalam CSS3 yang digunakan untuk menerapkan style layoutnya dan menentukan target lebar layarnya. Dengan tata letak yang fleksibel membuat kita bisa mengubah ukuran jendela browser untuk lebar yang berbeda beda. Ukuran jendela browser yang berbeda-beda menyebabkan kita harus menangani perbedaan desain dalam resolusi layar yang berbeda sesuai dengan perangkat. Media Queries membuat desain dapat beradaptasi pada perubahan resolusi layar dengan mengoptimalkan halaman setiap desain agar menjadi lebih responsive.[5] CSS 3 adalah versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3, tidak perlu mengubah apapun.
4 CSS3 memiliki salah satu fitur yakni media queries yang merupakan salah satu fitur utama untuk responsive design dan tentunya didukung fitur-fitur lain untuk menghasilkan web yang fleksibel.[6] CSS2 memungkinkan kita untuk menentukan stylesheet untuk jenis media tertentu seperti layar atau tampilan. Sekarang CSS3 bahkan membuat lebih efisien dengan menambahkan media queries. Dengan kondisi tertentu pada setiap jenis media CSS3 dapat menerapkan stylesheet yang berbeda. Sebagai contoh, CSS3 dapat memiliki satu stylesheet untuk menampilkan tampilan yang besar, dan stylesheet yang berbeda khusus untuk perangkat mobile. Hal ini membuat CSS3 dapat menyesuaikan dengan resolusi layar yang berbeda tanpa mengubah konten isi.[7] HTML (Hyper Text Markup Language) adalah file teks yang berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari sebuah halaman website. HTML 5 menyediakan video dan unsur-unsur audio melalui halaman website yang dapat memutar video dan audio tanpa memerlukan plug-in pihak ketiga. Sampai saat ini, belum ada standar untuk memutar file audio pada halaman website, saat ini, kebanyakan file audio diputar melalui plug-in (seperti flash). Namun, browser yang berbeda mungkin memiliki berbagai plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web: elemen <audio>. Konten teks harus dituliskan diantara tag <audio> dan </audio> untuk browser yang tidak mendukung elemen <audio>. Tabel 1 menunjukan perbandingan beberapa browser yang mendukung format audio yang digunakan di HTML 5. Tabel 1 Tabel perbandingan browser pendukung format audio untuk HTML 5 Browser MP3 Wav Ogg IE 9+ Ya Tidak Tidak Chrome 6+ Ya Ya Ya Firefox 3.6+ Tidak Ya Ya Safari 5+ Ya Ya Tidak Opera 10+ Tidak Ya Ya Seiring dengan berkembangnya pertumbuhan perangkat mobile, penggunaan HTML5 dalam mobile juga sudah banyak kemajuan. Berikut ini adalah tabel hasil dari pengujian sejauh mana HTML5 dapat dipakai dari berbagai sistem operasi mobile.[8] Tabel 2 Tabel perbandingan sistem operasi mobile pendukung untuk HTML5
5 3. Metode Pengembangan Sistem Penelitian menggunakan model waterfall, model ini diselesaikan melalui 5 tahapan penelitian. Pertama Analisis Kebutuhan, kedua Perancangan Sistem dan Perangkat Lunak, ketiga Implementasi dan Pengujian Unit, keempat Integrasi dan Pengujian Sistem, dan kelima Operasi dan Pemeliharaan Sistem. Gambar 1 Tahapan Model Waterfall Pada Gambar 1 merupakan tahapan model waterfall. Tahap pertama, analisis kebutuhan dan pengumpulan data, tujuannya mengumpulkan informasi dan melakukan analisa terhadap kebutuhan tersebut untuk mencari solusi kebutuhan sistem. Tahap kedua, perancangan sistem dan perangkat lunak. Perancangan database, yaitu merancang tabel-tabel database yang dibutuhkan menggunakan diagram Unified Modelling Languange (UML) dengan Rational Rose. Tahap ketiga, implementasi dan pengujian unit, adalah melakukan implementasi dalam sistem dari hasil perancangan. Tahap keempat, integrasi dan pengujian sistem, yaitu pengujian sistem website, serta evaluasi hasil pengujian. Tahap kelima, operasi dan pemeliharaan sistem, sistem yang dibangun harus dijaga dan dilakukan maintenance secara teratur, serta evaluasi untuk mencari kelemahan-kelemahan yang ada.[9] Use Case Diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem yang menjelaskan keseluruhan kerja sistem secara garis besar dengan mempresentasikan interaksi antara aktor yang dibuat, serta memberikan gambaran fungsi fungsi pada sistem tersebut. Gambar 2 Use Case Diagram Sistem
6 Gambar 2 menunjukkan Use Case Diagram Sistem yang dimiliki admin dan user. User dapat melakukan lihat konten beranda. Lihat materi belajar dan sub-sub materi yang disediakan. Lihat dan mengerjakan latihan soal. Akses data member berupa skor latihan dan profil. Berbeda dengan user, admin selain memiliki fitur yang sama dengan user. Admin memiliki fitur tambahan, seperti tambah, hapus dan perbarui data materi. Tambah, hapus dan perbaharui data latihan. Tambah, hapus dan perbarui data member. Gambar 3 Activity Diagram Admin untuk manajemen member Gambar 3 menunjukkan proses dari activity diagram bagi admin untuk manajemen member. Admin melihat member kemudian memilih menu tambah member, edit member, atau hapus member. Jika memilih hapus maka sistem akan menghapus member yang dipilih. Jika memilih tambah atau edit maka akan muncul form. Admin mengisi form. Sistem memeriksa form tersebut, apakah sesuai ketentuan. Jika form sesuai ketentuan, maka data didalam form tersebut akan ditambahkan ke dalam database. Data baru yang insert akan ditampilkan bersama data lama lainnya di halaman web. Gambar 4 Activity Diagram Siswa untuk melihat materi
7 Gambar 4 menunjukkan proses dari activity diagram bagi user. Activity diagram tersebut menunjukkan proses untuk melihat materi yang tersedia. User akan login menggunakan username dan password yang sudah ada, sistem akan mengecek apakah user sudah terdaftar, jika sudah terdaftar maka akan masuk ke halaman beranda. User memilih menu melihat materi, dan memilih submenu materi. Sistem kemudian melakukan request data ke database. Data materi dari database diambil, hasilnya ditampilkan dalam web. Gambar 5 Sequence Diagram User mengerjakan latihan Gambar 5 menampilkan sequence diagram untuk mengerjakan latihan. Pada langkah pertama user memilih materi latihan yang ingin dikerjakan. Sistem mengambil data sesuai dengan bablat, no_soal, soal, pilgan_a, pilgan_b, pilgan_c dan pilgan_d yang dipilih dari database sesuai dengan kategori yang diminta. Sistem menampilkan data yang diambil dari database dan ditampilkan pada halaman web dalam bentuk soal pilihan ganda. User menjawab soal latihan pilihan ganda yang ada, kemudian user submit jawaban soal. Sistem akan menghitung berapa skor yang didapat, kemudian menambahkan data nis, babnilai, benar, salah dan nilai pada database t_nilai. Gambar 6 Perancangan ERD Gambar 6 menjelaskan tentang perancangan database yang digunakan oleh sistem ini. database ini terdiri dari 12 tabel yaitu tmat_bab, tmat_belajar,
8 tmat_berbicara, tmat_kosakata, tmat_membaca, tmat_nyanyi, tmat_pic, tmat_berlatih, tmat_member, tmat_siswa, tmat_nilai, tmat_latihan. 4. Hasil dan Pembahasan Implementasi Responsive Web Design ada 3 yaitu : (1) Flexible Grid, (2) Flexible Image, (3) Media Queries. Dalam penerapan flexible grid digunakan rumus perhitungan matematika sederhana didalamnya. Perhitungan ini dirumuskan pada Persamaan 4.1. target / context = result (4.1) Keterangan: target = ukuran yang akan kita tampilkan context = ukuran browser dasar Hasil nilainya diterjemahkan kedalam bentuk persen yang digunakan oleh lebar container, margin dan padding. Untuk pengaturan margin, context adalah lebar element container yang ditempati. Untuk pengaturan padding, context adalah lebar element diri itu sendiri. Kode program 4.1 kode program implementasi flexible grid 1.header.menu{width:100%;height:auto;float:left; 2.header h1{padding:70px 0 30px 0; 3 font-size:2.375em;} 4.box-wrapper{width:90%;height:auto;} 5.box-wrapper.box{ 6 width: %;height:320px;float:left;} 7.main{width:100%;height:auto;float:left;} 8.main.main-wrapper{width:90%;height:auto; 9.main.main-box{width:30%; 10 margin: %;} 11.footer{width:100%;height:auto;float:left;} 12.footer.footer-wrapper{width:100%;height:auto; 13.footer.left{width: ; 14 margin-right:2.5%;padding-left:2.5%;} 15.footer.right{width: %; } Pada kode program 4.1 merupakan kode program penerapan flexible grid dalam user interface halaman siswa untuk siswa. Pada baris 1 merupakan pengaturan selector class header menu, dimana diasumsikan value property width diatur 100% atau setara dengan 1200 pixel. Pada baris 2-3 merupakan pengaturan selector class header h1 value property padding atas di atur 70 pixel, padding bawah di atur 30 pixel dan value property font-size di atur dengan nilai 2.375em dari hasil pembagian 38 pixel adalah target, 16 pixel adalah context. Pada baris ke 4 merupakan pengaturan selector class box-wrapper, dimana diasumsikan value property width di atur 90% atau setara dengan 1100 pixel dengan tinggi otomatis. Pada baris ke 5-6 selector class box-wrapper box value property width diatur persen, hasil tersebut didapat dari 400 pixel adalah target dibagi 1200 pixel adalah context, dengan tinggi 320 pixel dan value property float di atur left. Pada baris 7 selector class main value property width diatur 100% atau setara dengan 1200 pixel dengan value property height di atur otomatis dan value property float di atur left. Pada baris 8 selector class main mainwrapper value property width diatur 90% atau setara dengan 1100 pixel dengan
9 value property height di atur otomatis. Pada baris 9-10 selector class main mainbox value property width di atur 30% dari hasil pembagian 320 pixel adalah target dibagi 1200 pixel adalah context dan value property margin di atur % dari hasil pembagian 20 pixel adalah target dibagi 1200 pixel adalah context. Pada baris 11 selector class footer value property width diatur 100% atau setara dengan 1200 pixel dengan value property height di atur otomatis dan value property float di atur left. Pada baris 12 selector class footer footer-wrapper value property width diatur 100% atau setara dengan 1200 pixel dengan value property height di atur otomatis. Pada baris value property width di atur % dari hasil pembagian 800 pixel adalah target dibagi 1200 pixel adalah context, untuk value property margin-right dan padding-left di atur 2.5% dari hasil pembagian 30 pixel adalah target dibagi dengan 1200 pixel adalah context. Pada baris 15 selector class footer right value property width di atur % dari hasil pembagian 370 pixel adalah target dibagi dengan 1200 pixel adalah context. Flexible Images berarti setiap image yang ada didalam website tidak melebihi lebar container dari layout yang dirancang. Kode program 4.2 kode program implementasi Flexible Images logo{width: %;float:left;} logo img{max-width: 100%; height: auto; overflow:hidden;} Pada kode program 4.2 merupakan kode program dalam pengaturan untuk logo. Pada baris 1 adalah kode untuk batas container dengan width di atur % dari hasil pembagian 75 pixel adalah target dibagi 370 adalah context. Pada baris 2-3 merupakan kode program dalam pengaturan untuk lebar tag img yang dimana pada baris 2 max-width di atur 100% berfungsi untuk menyesuaikan lebar dari container. Pada baris 4 berfungsi untuk memotong gambar yang melampaui batas lebar container. Implementasi dari media queries dalam website yang dibuat terdapat enam spesifikasi yaitu tampilan untuk minimal lebar browser 1200 pixel, lebar browser maksimal 1200 pixel, lebar browser maksimal 1024 pixel, lebar browser maksimal 768 pixel, lebar browser maksimal 600 pixel dan lebar browser maksimal 480 pixel. Berikut salah satu penerapan media queries dalam user interface halaman materi bab untuk siswa. Kode Program 4.3 kode program desain website lebar maksimal 1024 pixel screen and (max-width:1024px){.header-bab.menu{width:100%;height:auto;}.header-bab.banner{width:100%;height:auto;}.main-bab{float:left;width:100%;height:auto;}.main-bab.main-wrapper{width:90%;height:auto;}.main-bab.main-box{width:90%;height:370px;}.footer{width:100%;height:auto;}.footer.footer-wrapper{width:100%;height:auto;}.footer.left{width: %;height:auto; margin-right: %;font-size:15px;}.footer.right{width: %;height:auto;}
10 Pada kode program 4.3 merupakan kode untuk menampilkan desain website dalam aturan lebar maksimal 1024 pixel. Dalam kode program tersebut pada baris 1 merupakan penulisan syarat untuk ukuran lebar browser maksimal 1024 pixel. Pengaturan lebar width dalam tiap masing-masing selector class berfungsi untuk menyesuaikan lebar dari container. Kode Program 4.4 kode program desain website lebar maksimal 480 pixel screen and (max-width:480px){.main-bab{width:100%;height:auto;float:left;}.main-bab.main-wrapper{width:100%;height:auto;}.main-bab.main-box{width:100%;height:370px;}.footer{width:100%;height:auto;float:left;}.footer.footer-wrapper{width:95%;height:auto;}.footer.left{width:100%;height:auto;float:left;}.footer.right{width:100%;height:auto;float:left;} Pada kode program 4.4 merupakan kode untuk menampilkan desain website dalam aturan lebar maksimal 480 pixel. Dalam kode program tersebut pada baris 1 merupakan penulisan syarat untuk ukuran lebar browser maksimal 1024 pixel. Pengaturan lebar width dalam tiap masing-masing selector class berfungsi untuk menyesuaikan lebar dari container. Tampilan user interface Beranda Pembelajaran Mandarin SMP Kristen Satya Wacana untuk PC dan laptop dan juga ipad dengan tampilan landscape, ukuran layar browser maksimal 1024 pixel, dapat dilihat pada Gambar 7. Gambar 7 User Interface Beranda untuk PC dan Laptop Tampilan user interface Beranda Pembelajaran Mandarin SMP Kristen Satya Wacana untuk ipad dengan tampilan portrait dan tablet android, ukuran layar browser maksimal 768 pixel, dapat dilihat pada gambar 8.
11 Gambar 8 User Interface Beranda untuk ipad dan Tablet Android Tampilan user interface Beranda Pembelajaran Mandarin SMP Kristen Satya Wacana untuk handphone ukuran layar browser maksimal 480 pixel, dapat dilihat pada gambar 9. Gambar 9 User Interface Beranda untuk ipad dan Tablet Android
12 Pengujian validasi sistem menggunakan metode pengujian Black Box, dimana dilakukan pengujian spesifikasi terhadap fungsi-fungsi yang telah dirumuskan dalam daftar kebutuhan apakah berjalan sesuai antara kinerja sistem dengan daftar kebutuhan. Pengujian dilakukan pada bagian yang dapat diakses oleh user atau pengguna biasa (bukan admin). Tabel 1 menunjukkan hasil pengujian black box testing pada siswa. Tabel 1 Uji Validasi Sebagai Siswa Validasi No. Jenis Uji Hasil Tidak Valid Valid 1. Login dengan Username dan Berhasil Password Siswa yang terdaftar - 2. Login dengan Username dan Tidak Password Siswa yang tidak terdaftar Berhasil - 3. Lihat Data Materi Berhasil - 4. Submit Latihan Berhasil - 5. Lihat Data Siswa Berhasil - 6. Lihat Data Nilai Berhasil - 7. Reset Data Nilai Berhasil - 8. Ganti Password Login Berhasil - 9. Logout Berhasil - Bagian pengujian lainnya adalah pengujian untuk bagian-bagian yang dapat diakses oleh admin. Tabel 2 menunjukkan hasil pengujian black box testing pada admin. Tabel 2 Uji Validasi Sebagai Administrator Validasi No. Jenis Uji Hasil Tidak Valid Valid 1. Login dengan ID dan Password Berhasil Administrator yang terdaftar - 2. Login dengan ID dan Password Tidak Administrator yang tidak terdaftar Berhasil - 3. Kelola Data Materi (tambah, edit, hapus, Berhasil dan view) - 4. Kelola Data Latihan (tambah, edit, Berhasil hapus, dan view) - 5. Kelola Data Member (tambah, edit, Berhasil hapus, dan view) - 6. Logout Berhasil - Tahap selanjutnya dalam pengujian sistem adalah pengujian dari berbagai browser dan mobile device. Berikut ini adalah hasil dari pengujian aplikasi yang telah dilakukan guna mengetahui design responsive sistem berjalan dengan baik.
13 Gambar 10 Uji Melalui Browser Mozilla Firefox Gambar 10 merupakan salah satu uji coba aplikasi ke sebuah testing responsive web yang dimiliki oleh mattkersley yang beralamat domain dengan menggunakan browser Mozilla Firefox versi Gambar 11 Uji Melalui Apple iphone 4s Pada gambar 11 merupakan pengujian aplikasi terhadap device smartphone tipe Apple iphone 4s. Gambar 12 Uji Melalui Samsung Galaxy S3 Pada gambar 12 merupakan pengujian aplikasi terhadap device smartphone tipe Samsung Galaxy S3.
14 Gambar 13 Uji Melalui Apple ipad Pada gambar 13 merupakan pengujian aplikasi terhadap device tablet tipe Apple ipad. Gambar 14 Uji Melalui Laptop Acer Aspire One Pada gambar 14 merupakan pengujian aplikasi terhadap device laptop tipe acer aspire one. Gambar 15 Uji Melalui Desktop Komputer Pada gambar 15 merupakan pengujian terhadap device komputer dengan ukuran layar lebih dari 1200 pixel. Dari hasil pengujian aplikasi dari berbagai
15 browser dan mobile device terlihat bahwa responsive web design dalam aplikasi berfungsi dengan baik dan lancar. Tahap pengujian selanjutnya adalah tahap uji responden yang melibatkan 25 orang responden yang memiliki keterkaitan dengan sistem yang dibangun. Pengujian user siswa dilakukan dengan memberikan penilaian untuk menghitung persentase hasil. Gambar 16 Uji Responden Sebagai Siswa Gambar 16 merupakan hasil pengujian sebagai user siswa melibatkan 25 orang responden menyatakan bahwa tampilan interface sistem yang dapat menyesuaikan layar device sangat menarik, dalam penggunaannya mudah digunakan, nada dalam pembelajaran Bahasa Mandarin menjadi mudah dimengerti, dan juga materi yang menarik dalam pembelajaran Bahasa Mandarin. Gambar 17 Uji Responden Guru Sebagai Administrator
16 Gambar 17 merupakan hasil pengujian guru sebagai administrator menyatakan bahwa tampilan interface sistem yang dapat menyesuaikan layar device sangat menarik, dalam penggunaannya mudah digunakan, sudah mencakup semua pengolahan materi, dan layanan juga sudah sesuai dengan yang diharapkan. 5. Simpulan Dari hasil perancangan website Pengembangan Media Pembelajaran Bahasa pada SMP Kristen Satya Wacana yang menerapkan Responsive Web Design maka dapat disimpulkan bahwa website dapat diakses dibeberapa media device dengan syarat web browser yang digunakan mendukung teknologi CSS3. Berdasarkan uji kepada pengguna, dapat disimpulkan bahwa siswa dapat dengan mudah mengakses materi pembelajaran Bahasa Mandarin. Aplikasi yang telah dibuat dapat membantu dalam memahami pelafalan nada dalam bahasa Mandarin. Aplikasi ini masih memiliki beberapa keterbatasan seperti tidak adanya video animasi dan sistem searching. Untuk pengembangan lebih lanjut, dapat menambahkan sistem pengembangan hmtl5 yang lebih kompleks, seperti penambahan video dan animasi didalam aplikasi. Penambahan materi pembelajaran dari sumber-sumber lain juga dibutuhkan untuk melengkapi materi yang ada. Aplikasi dapat dikembangkan menggunakan sistem searching agar setiap pelafalan nada dapat dicari dan didengarkan oleh siswa, tidak hanya terbatas pada pelafalan nada dalam materi. 6. Pustaka [1]. Mayliana Penggunaan Hanyu Pinyin Sebagai Dasar Pembelajaran Bahasa Mandarin Di SMK Negeri 1 Surakarta. Surakarta. [2]. Ardy Media Pembelajaran Bahasa Mandarin Berbasis Client Server Pada Sistem Operasi Android. Makassar. [3]. Herbowo. Agus Rahmat Web Responsive Design Untuk Situs Berita Menggunakan Framework Codeigniter. Jakarta. [4]. Putra, Candra Adi Responsive Web Design & Mobile Web Diakses Tanggal 10 September [5]. Marcotte, Ethan A Book Apart. New York:New York. [6]. Susanto, Dwi Responsive Design Solusi Desain Web Yang Fleksibel. Diakses Tanggal 5 Desember [7]. La, Nick CSS3 Media Queries. Diakses Tanggal 5 Desember [8]. Maximiliano HTML5 compatibility on mobile and tablet browsers with testing on real devices. Diakses Tanggal 27 Agustus [9]. Pressman, Roger S Software engineering: a practitioner s approach. Amerika Serikat : R.S. Pressman and Associates.
Dari kedua penelitian tersebut dapat memberikan referensi bagaimana cara mengimplementasikan teknologi Responsive Web Design pada situs e-learning
1. Pendahuluan Saat ini sudah banyak orang melakukan pengaksesan internet tidak hanya melalui penggunaan komputer saja, tetapi juga melalui berbagai macam device, salah satu contohnya penggunaan smartphone.
Lebih terperinciBAB II TINJAUAN PUSTAKA DAN DASAR TEORI. autentikasi dan otorisasi user. Aplikasi belum menggunakan teknologi responsive
BAB II TINJAUAN PUSTAKA DAN DASAR TEORI 2.1 Tinjauan Pustaka Nova P (2015) Aplikasi yang dibangun berbasis web yang memiliki fasilitas transkasi pengiriman antara pengirim dan penerima melalui sistem login
Lebih terperinciBAB IV PERANCANGAN SISTEM 4.1 PERANCANGAN SISTEM Untuk memudahkan pembuatan aplikasi sistem pakar berbasis website, maka akan dibuat model menggunakan UML (Unified Modeling Language). Perlu diketahui metode
Lebih terperinciBAB III CARA DAN METODOLOGI PENELITIAN
BAB III CARA DAN METODOLOGI PENELITIAN 3.1 Metodologi Penelitian Penelitian tentang Sistem Informasi Perusahaan dan Kepegawaian PT. BUHARUM berbasis website menggunakan metode Software Development Life
Lebih terperinciBAB III METODE PENELITIAN
BAB III METODE PENELITIAN 3.1 Tempat dan Waktu Penelitian Tempat yang digunakan penulis dalam melakukan penelitian ini adalah Prodi Teknik Informatika Universitas Muhammadiyah Yogyakarta. Adapun penelitian
Lebih terperincimenggunakan framework codeigniter maka permasalahan perkembangan perangkat dan variasi layar terpecahkan oleh teknologi web responsive design selain i
WEB RESPONSIVE DESIGN UNTUK SITUS BERITA MENGGUNAKAN FRAMEWORK CODEIGNITER AGUS RAHMAT HERBOWO (10108111) Tugas Akhir, Jurusan Sistem Informasi, Fakultas Ilmu Komputer dan Teknologi Informasi, Universitas
Lebih terperinciBAB III METODE PENELITIAN
BAB III METODE PENELITIAN 3.1 Alat dan Bahan 3.1.1 Alat Dalam penelitian ini, alat yang di gunakan adalah sebagai berikut: 1. Perangkat Keras (Hardware) a) Personal Computer (PC)/Laptop 32/64 bit architecture
Lebih terperinciKAJIAN 3 Web Responsive
KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan
Lebih terperinciBAB III METODOLOGI PENELITIAN. Penelitian ini dilakukan di Jurusan Ilmu Komputer Fakultas Matematika dan Ilmu
21 BAB III METODOLOGI PENELITIAN 3.1 Tempat dan Waktu Penelitian Penelitian ini dilakukan di Jurusan Ilmu Komputer Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Lampung. Waktu penelitian dilakukan
Lebih terperinciSKRIPSI PERANCANGAN SISTEM INFORMASI PENCARIAN DAN PEMESANAN RUMAH KOS BERBASIS WEB DAN SMS GATEWAY STUDI KASUS KECAMATAN BEKASI SELATAN KOTA BEKASI
SKRIPSI PERANCANGAN SISTEM INFORMASI PENCARIAN DAN PEMESANAN RUMAH KOS BERBASIS WEB DAN SMS GATEWAY STUDI KASUS KECAMATAN BEKASI SELATAN KOTA BEKASI Disusun Oleh : Nama : RAHMAT HIDAYAT NPM : 201210227022
Lebih terperinciUKDW BAB 1 PENDAHULUAN
BAB 1 PENDAHULUAN 1.1 Latar Belakang Masalah Seiring dengan perkembangan teknologi web yang semakin berkembang cepat, aplikasi-aplikasi web yang bermunculan juga semakin banyak, dimulai dari aplikasi web
Lebih terperinciIMPLEMENTASI DIGITAL LIBRARY BERBASIS HTML 5 PADA SMKN-4 PALANGKARAYA
IMPLEMENTASI DIGITAL LIBRARY BERBASIS HTML 5 PADA SMKN-4 PALANGKARAYA TUGAS AKHIR Persyaratan Guna Meraih Gelar Sarjana Strata I Teknik Informatika Universitas Muhammadiyah Malang Disusun Oleh : MUHAMMAD
Lebih terperinciBAB III ANALISIS DAN PERANCANGAN
BAB III ANALISIS DAN PERANCANGAN 3.1 ANALISIS MASALAH Berita adalah laporan tercepat mengenai fakta atau ide terbaru yang benar, berita tersebar ke khalayak luas melalui media kabar berkala seperti surat
Lebih terperinciBAB III ANALISA DAN PERANCANGAN APLIKASI PUBLIKASI DIGITAL 3.1 Analisa Masalah dan Alternatif Pemecahan Masalah Pada penulisan tugas akhir ini akan di analisa mengenai masalah dalam penggabungan video
Lebih terperinciBAB 1 PENDAHULUAN. 1.1 Latar Belakang
BAB 1 PENDAHULUAN 1.1 Latar Belakang Perkembangan teknologi di dunia sudah sangat maju dibandingkan dengan teknologi yang ada beberapa tahun yang lalu. Perkembangan teknologi ini harus dapat dimanfaatkan
Lebih terperinciE-DAKWAH MASJID AGUNG KUDUS BERBASIS WEB. Program Studi Teknik Informatika, Fakultas Teknik, Universitas Muria Kudus 2
E-DAKWAH MASJID AGUNG KUDUS BERBASIS WEB Rizkysari Meimaharani 1*, Tri Listyorini 1, Syafiul Muzid 2 1 Program Studi Teknik Informatika, Fakultas Teknik, Universitas Muria Kudus 2 Jurusan Sistem Informasi,
Lebih terperinciImplementasi Identifikasi Kendala Sistem Identifikasi Pengguna Administrator Pengujian Sistem Member Pengunjung atau umum HASIL DAN PEMBAHASAN
Implementasi Pada tahap ini CMS akan dibuat atau dikembangkan berdasarkan tahap-tahap pengembangan sistem yang telah dijelaskan sebelumnya dengan menggunakan software dan hardware yang diperlukan untuk
Lebih terperinciBAB 4 IMPLEMENTASI DAN PENGUJIAN
BAB 4 IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Implementasi adalah penerapan cara kerja sistem berdasarkan hasil analisa dan juga perancangan yang telah dibuat sebelumnya ke dalam suatu bahasa pemrograman
Lebih terperinciBAB III ANALISA DAN PERANCANGAN
BAB III ANALISA DAN PERANCANGAN III.1. Analisis Masalah Seiring berkembangnya internet dan banyaknya informasi bahkan dapat mengakses konten pornografi yang dapat diakses dengan mudah,indonesia masuk dalam
Lebih terperinciPERANCANGAN DAN PEMBUATAN APLIKASI D3 TEKNIK INFORMATIKA UNS BERBASIS WEB DAN ANDROID
PERANCANGAN DAN PEMBUATAN APLIKASI D3 TEKNIK INFORMATIKA UNS BERBASIS WEB DAN ANDROID Yudho Yudhanto Fakultas MIPA, Program Studi D3 Teknik Informatika Universitas Negeri Sebelas Maret Email: yuda@mipa.uns.ac.id
Lebih terperinciPerancangan Sistem Pengolahan Data Nilai Pada Tempat Kursus Bahasa Asing (Studi Kasus : Kotabahasa Salatiga) Artikel Ilmiah
Perancangan Sistem Pengolahan Data Nilai Pada Tempat Kursus Bahasa Asing (Studi Kasus : Kotabahasa Salatiga) Artikel Ilmiah Peneliti : Angela Firantia (672009294) Suprihadi, S.Si., M.Kom. Program Studi
Lebih terperinciBAB III ANALISA DAN PERANCANGAN SISTEM
BAB III ANALISA DAN PERANCANGAN SISTEM Pada perancangan suatu sistem diperlukan analisis yang tepat sehingga proses pembuatan sistem dapat berjalan dengan lancar dan sistem yang dibuat sesuai dengan yang
Lebih terperinciDAFTAR ISI. LAPORAN TUGAS AKHIR... ii
DAFTAR ISI LAPORAN TUGAS AKHIR... i LAPORAN TUGAS AKHIR... ii HALAMAN PENGESAHAN... iii KATA PENGANTAR... iv DAFTAR ISI... v DAFTAR GAMBAR... ix DAFTAR TABEL... xiii INTISARI... xiv ABSTRACT... xv BAB
Lebih terperinci2.4.4 Activity Diagram... II Sequence Diagram... II Collaboration Diagram... II Implementasi... II PHP...
DAFTAR ISI ABSTRACT... i ABSTRAK... ii KATA PENGANTAR... iii DAFTAR ISI... v DAFTAR GAMBAR... viii DAFTAR TABEL... xi DAFTAR SIMBOL... xii BAB I... I-1 PENDAHULUAN... I-1 1.1 Latar Belakang... I-1 1.2
Lebih terperinciPendahuluan Kajian Pustaka
1. Pendahuluan Internet sering digunakan sebagai media untuk mempublikasikan informasi sehingga mudah diakses oleh masyarakat luas. Perkembangan teknologi internet berperan dalam menunjang berbagai aspek
Lebih terperinciBAB III PERANCANGAN SISTEM
BAB III PERANCANGAN SISTEM 3.1 Bahan Dan Alat Penelitian 3.1.1 Bahan Penelitian Bahan yang digunakan di dalam penelitian ini berupa data, meliputi data master dan data pendukung. Data master adalah data
Lebih terperinciBAB I PENDAHULUAN. Menurut Ciptaningtyas, Ijtihadie, dan Lumayung (2014) bahwa di
BAB I PENDAHULUAN 1.1 Latar belakang Menurut Setiyo (2013) bahwa Pengembangan e-learning merupakan suatu keharusan bagi seluruh perguruan tinggi agar standar mutu pendidikan dapat ditingkatkan. E-learning
Lebih terperinciBAB IV ANALISIS DAN PERANCANGAN SISTEM. Use Case Diagram dan Activity Diagram. Selain itu juga pada analisis ini akan
BAB IV ANALISIS DAN PERANCANGAN SISTEM 4.1. Analisis Sistem Yang Berjalan Didalam analisis ini akan menjelaskan apa saja proses yang terjadi di SMP Negeri 2 Wanayasa dan mendeskripsikan persoalan yang
Lebih terperinciBAB III ANALISIS DAN DESAIN SISTEM
BAB III ANALISIS DAN DESAIN SISTEM III.1. Analisa Masalah Masih banyaknya sebagian dari siswa yang tidak lulus tiap tahunnya dikarenakan sebagian dari siswa masih belum paham dalam mengerjakan soalsoal
Lebih terperinciBAB IV ANALISA DAN PERANCANGAN
BAB IV ANALISA DAN PERANCANGAN 4.1. Deskripsi Umum Aplikasi Aplikasi pembelajaran dan evaluasi tahsin Al-Quran yang dibangun merupakan aplikasi berbasis web. Aplikasi ini dapat diakses melalui beberapa
Lebih terperinciBAB 1 PENDAHULUAN 1.1 Latar Belakang
BAB 1 PENDAHULUAN 1.1 Latar Belakang Pada awal abad ke-21 ini, kegunaan internet sudah cukup memengaruhi kehidupan masyarakat. Pada tahun 2012, pengguna internet di dunia tercatat sudah mencapai 2,4 miliar
Lebih terperinciPERANCANGAN E-COMMERCE GOODY BAG SPUNBOND MENGGUNAKAN QR CODE BERBASIS WEB RESPONSIF
PERANCANGAN E-COMMERCE GOODY BAG SPUNBOND MENGGUNAKAN QR CODE BERBASIS WEB RESPONSIF Rizkysari Meimaharani 1, Diana Laily 2 12 Program Studi Teknik Informatika, Fakultas Teknik, Universitas Muria Kudus
Lebih terperinciBAB III METODE PENELITIAN
BAB III METODE PENELITIAN 3.1. Prosedur Penelitian Dalam pengembangan sistem dibutuhkan suatu metode yang berfungsi sebagai acuan atau prosedur dalam mengembangkan suatu sistem. Metode pengembangan sistem
Lebih terperinciBAB II TINJAUAN PUSTAKA DAN DASAR TEORI
BAB II TINJAUAN PUSTAKA DAN DASAR TEORI 2.1. Tinjauan Pustaka Dari penelitian dalam ini menggunakan referensi yang sudah dibuat oleh penelitian sebelumnya, perbandingannya dapat dilihat pada tabel 2.1
Lebih terperinciBAB II TINJAUAN PUSTAKA DAN DASAR TEORI
BAB II TINJAUAN PUSTAKA DAN DASAR TEORI 2.1 Tinjauan Pustaka Sistem Informasi yang dibuat dalam penelitian ini mengacu pada beberapa penelitian terdahulu meliputi: Jeman (2013) Sistem Informasi Pariwisata
Lebih terperinciBAB 1 PENDAHULUAN. melakukan berbagai aktivitas baik pada saat bekerja maupun pada saat bersosialisasi di
BAB 1 PENDAHULUAN 1.1 Latar Belakang Di era globalisasi seperti sekarang ini, bahasa merupakan kebutuhan pokok untuk melakukan berbagai aktivitas baik pada saat bekerja maupun pada saat bersosialisasi
Lebih terperinciBAB IV ANALISA DAN PERANCANGAN SISTEM. diusulkan dari sistem yang ada di Dinas Kebudayaan dan Pariwisata Kota
BAB IV ANALISA DAN PERANCANGAN SISTEM 4.1. Analisis Sistem yang Sedang Berjalan Pada bab ini dijelaskan mengenai prosedur yang berjalan dan yang diusulkan dari sistem yang ada di Dinas Kebudayaan dan Pariwisata
Lebih terperinci3 Perancangan Website Menggunakan Responsive Web Design. Syachbana dan Zulkarnain Akib
3 Perancangan Website Menggunakan Responsive Web Design Syachbana dan Zulkarnain Akib PERANCANGAN WEBSITE MENGGUNAKAN RESPONSIVE WEB DESIGN Syachbana dan Zulkarnain Akib b.na.sys@gmail.com Abstrak Akses
Lebih terperinciBAB III ANALISA DAN PERANCANGAN SISTEM
BAB III ANALISA DAN PERANCANGAN SISTEM Pada bab ini membahas analisa dan perancangan sistem, penelitian ini menggunakan bahasa pemrograman berbasis objek. Analisa sistem meliputi analisa kebutuhan fungsional,
Lebih terperinciBAB IV IMPLEMENTASI DAN EVALUASI
BAB IV IMPLEMENTASI DAN EVALUASI 4.1. Kebutuhan Sistem Sebelum melakukan implementasi dan menjalankan Aplikasi Serious Games Belajar Mengenal Hewan Bagi Anak Tunagrahita Ringan. Maka dibutuhkan spesifikasi
Lebih terperinciRANCANG BANGUN SISTEM INFORMASI E-RESEARCH STIKOM BALI MULTI PLATFORM SMARTPHONE BERBASIS PHONEGAP
RANCANG BANGUN SISTEM INFORMASI E-RESEARCH STIKOM BALI MULTI PLATFORM SMARTPHONE BERBASIS PHONEGAP I Gede Suardika STMIK STIKOM Bali Jl Raya Puputan Renon No. 86 Denpasar, (0361) 244445 e-mail: suardika@stikom-bali.ac.id
Lebih terperinciBAB III METODOLOGI. Penelitian ini dilaksanakan di Ruang Server Biro Sistem Informasi (BSI)
BAB III METODOLOGI 3.1. Tempat dan Waktu Penelitian Penelitian ini dilaksanakan di Ruang Server Biro Sistem Informasi (BSI) yang berlokasi di Gedung AR Fachruddin B Universitas Muhammadiyah Yogyakarta,
Lebih terperinciBAB I PENDAHULUAN 1.1 Latar Belakang
BAB I PENDAHULUAN 1.1 Latar Belakang Dalam sebuah infrastruktur perguruan tinggi, kebutuhan akan informasi menuntut adanya suatu sistem yang bisa melayani dengan cepat dan mudah. Khususnya dalam hal ini
Lebih terperinciBAB VI DESAIN WEB RESPONSIF
BAB VI DESAIN WEB RESPONSIF A. KOMPETENSI DASAR Memahami konsep dasar desain halaman web responsif Mampu menerapkan konsep desain web responsif ke dalam aplikasi Mampu menghasilkan desain aplikasi web
Lebih terperinciPercobaan 1 : Mengatur Width Dan Height Hasil :
Percobaan 1 : Mengatur Width Dan Height Analisa : Terlihat di atas kalau width dan height dari tag dan berbeda sesuai value yang telah diinputkan yang bias dibedakan dengan background-color
Lebih terperinciBAB 1 PENDAHULUAN. 1.1 Latar Belakang Masalah
BAB 1 PENDAHULUAN 1.1 Latar Belakang Masalah Internet telah memberikan akses informasi tanpa mengenal batasan ruang dan waktu. Informasi dapat diakses kapan saja secara global. Seiring berkembangnya teknologi
Lebih terperinciBAB III ANALISA DAN PERANCANGAN SISTEM
36 BAB III ANALISA DAN PERANCANGAN SISTEM III.1 Analisa Perancangan aplikasi E-Learning ini membahas seputar materi Microsoft Word 2003. Setiap penjelasan disertai dengan arahan berupa suara untuk melanjutkan
Lebih terperinciBAB IV ANALISIS DAN PERANCANGAN SISTEM. permasalahan dari suatu sistem informasi. Hasil akhir dari analisis sistem
BAB IV ANALISIS DAN PERANCANGAN SISTEM 4.1. Analisis yang Berjalan Analisis sistem merupakan proses memilah-milah suatu permasalahan menjadi elemen-elemen yang lebih kecil untuk dipelajari guna mempermudah
Lebih terperinciBAB IV ANALISIS DAN PERANCANGAN SISTEM
52 BAB IV ANALISIS DAN PERANCANGAN SISTEM 4.1 Analisis Sistem Yang Berjalan Merupakan tahap identifikasi terhadap alur sistem yang terjadi dalam proses promosi yang ada pada DISBUDPAR Bandung. Proses analisis
Lebih terperinciBAB III ANALISIS DAN PERANCANGAN SISTEM
28 BAB III ANALISIS DAN PERANCANGAN SISTEM 3.1 Alat dan Bahan 3.1.1 Alat Alat yang dibutuhkan untuk membangun Aplikasi Berbagi Cerita Wisata Surakata Berbasis Android yaitu meliputi hardware dan software
Lebih terperinciBAB IV IMPLEMENTASI DAN PENGUJIAN
BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Setelah melalui tahap analisis dan tahap perancangan terhadap aplikasi berbasis web menggunakan framework codeigniter, tahapan selanjutnya adalah implementasi
Lebih terperinciBAB 4 IMPLEMENTASI DAN EVALUASI
234 BAB 4 IMPLEMENTASI DAN EVALUASI 4.1 Implementasi Pada bagian implementasi, penulis akan menjelaskan mengenai spesifikasi perangkat keras dan perangkat lunak yang dibutuhkan sistem, jaringan yang dibutuhkan,
Lebih terperinciBAB III Validasi HTML5
1 Modul Praktikum Pemprograman Web BAB III Validasi HTML5 A. Tujuan Memahami konsep dasar active web page, Mampu menghasilkan halaman web yang interaktif, Mampu memanfaatkan validasi data menggunakan HTML5.
Lebih terperinciBab 3 Metode dan Rancangan Sistem
13 Bab 3 Metode dan Rancangan Sistem 3.1 Metode Pengembangan Sistem Pembahasan Metode Prototype Metode penelitian yang digunakan pada pembuatan aplikasi ini adalah model prototype. Model prototype merupakan
Lebih terperinciBAB IV METODE PENELITIAN. Penelitian ini adalah penelitian rekayasa perangkat lunak yang
BAB IV METODE PENELITIAN A. Jenis Penelitian Penelitian ini adalah penelitian rekayasa perangkat lunak yang membangun sebuah aplikasi sistem informasi penjualan sparepart laptop di Toko Haps Computer Purbalingga.
Lebih terperinciAPLIKASI PENGENALAN KEBUDAYAAN KHAS TORAJA ( UKIRAN ) BERBASIS ANDROID
APLIKASI PENGENALAN KEBUDAYAAN KHAS TORAJA ( UKIRAN ) BERBASIS ANDROID Suryadi Hozeng 1), Asrul Syam 2) 1)2) Program Studi Teknik Informatika STMIK Dipanegara Makassar Jl Perintis Kemerdekaan Km.9, Makassar
Lebih terperinciBAB IV IIMPLEMENTASI DAN PENGUJIAN. Implementasi merupakan tahap pengembangan dimana hasil analisis dan
BAB IV IIMPLEMENTASI DAN PENGUJIAN Implementasi merupakan tahap pengembangan dimana hasil analisis dan perancangan dijadikan acuan dalam pembuatan kode program. Pada awal bagian ini akan dijelaskan spesifikasi
Lebih terperinciBab IV IMPLEMENTASI DAN EVALUASI
Bab IV IMPLEMENTASI DAN EVALUASI 4.1. Implementasi Rancangan yang dibangun pada Bab III diimplementasikan pada web server yang dilengkapi dengan PHP5 sebagai server side scripting dan MySQL sebagai database
Lebih terperinciPENGEMBANGAN APLIKASI WEB UNTUK PENGAJUAN CUTI PEGAWAI SECARA ONLINE. Gandana Akhmad Syaripudin 1, Rinda Cahyana 2
PENGEMBANGAN APLIKASI WEB UNTUK PENGAJUAN CUTI PEGAWAI SECARA ONLINE Gandana Akhmad Syaripudin 1, Rinda Cahyana 2 Jurnal Algoritma Sekolah Tinggi Teknologi Garut Jl. Mayor Syamsu No. 1 Jayaraga Garut 44151
Lebih terperinciBAB IV HASIL DAN UJI COBA
BAB IV HASIL DAN UJI COBA IV.1. Tampilan Hasil Dari hasil penelitian, analisis, perancangan dan pengembangan sistem yang diusulkan, maka hasil akhir yang diperoleh adalah sebuah perangkat lunak Sistem
Lebih terperinciBAB V IMPLEMENTASI DAN KESIMPULAN
BAB V IMPLEMENTASI DAN KESIMPULAN Pada bab ini penulis akan membahas lebih dalam mengenai implementasi dan hasil uji coba terhadap sistem aplikasi yang telah dibuat. Uji coba ini bertujuan untuk mengetahui
Lebih terperinciDasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata
Dasar Pemrograman Web Pemrograman Web Adam Hendra Brata Konsep Dasar Desain Web HTML CSS HTML HTML (HyperText Markup Language) Bahasa standar yang digunakan untuk menampilkan document web. Mengontrol tampilan
Lebih terperinciBAB 1 PENDAHULUAN 1.1 Latar Belakang
BAB 1 PENDAHULUAN 1.1 Latar Belakang Perkembangan dan kemajuan Information Technology (IT) dewasa ini sangat signifikan dan salah satu faktor pendukungnya adalah dengan hadirnya smartphone. Banyak hal
Lebih terperinciBAB IV IMPLEMENTASI DAN EVALUASI SISTEM
91 BAB IV IMPLEMENTASI DAN EVALUASI SISTEM Tahap implementasi sistem adalah tahap yang mengkonversi hasil analisis dan perancangan sebelumnya kedalam sebuah bahasa pemrograman yang dimengerti oleh komputer.
Lebih terperinciTAMPILAN PC / LAPTOP Bagian atas - Beranda. Klik Logo ini untuk kembali ke halaman Beranda Informasi nomor Customer Service
TAMPILAN PC / LAPTOP Bagian atas - Beranda 1 2 3 4 5 6 Bagian bawah - Beranda 7 8 1 2 3 4 5 6 7 8 Klik Logo ini untuk kembali ke halaman Beranda Informasi nomor Customer Service Susunan menu dan fitur
Lebih terperinciMEDIA PEMBELAJARAN PENGANTAR AKUNTANSI BERBASIS WEBSITE PADA SEKOLAH TINGGI ILMU EKONOMI MUHAMMADIYAH PALOPO. Freggi Soegri
MEDIA PEMBELAJARAN PENGANTAR AKUNTANSI BERBASIS WEBSITE PADA SEKOLAH TINGGI ILMU EKONOMI MUHAMMADIYAH PALOPO Freggi Soegri Teknik Informatika, Fakultas Teknik Komputer, Universitas Cokroaminoto Palopo
Lebih terperinciBAB III METODE PENELITIAN. Dalam penelitian ini, alat yang di gunakan adalah sebagai berikut: 1. Perangkat Keras (Hardware)
BAB III METODE PENELITIAN 3.1 Alat dan Bahan 3.1.1 Alat Dalam penelitian ini dibutuhkan beberapa alat dan bahan sebagai penunjang keberhasilan penelitian. Alat dan bahan tersebut adalah sebagai berikut:
Lebih terperinciBAB III METODOLOGI PENELITIAN. digunakan berupa perangkat keras dan perangkat lunak. 8 GB Random Access Memmory (RAM), Sistem Operasi Windows 10.
11 BAB III METODOLOGI PENELITIAN 3.1 Peralatan Pendukung Dalam penelitian dibutuhkan beberapa peralatan pendukung untuk mendukung berjalannya perancangan dan implementasi aplikasi. Alat yang digunakan
Lebih terperinciBAB 1 PENDAHULUAN 1.1 Latar Belakang
BAB 1 PENDAHULUAN 1.1 Latar Belakang Hitomi Takahashi dan Takayuki Kushida (2014) menjelaskan bahwa pengguna dalam menghubungkan perangkat mereka ke sebuah jaringan masih mengalami keterbatasan kemampuan,
Lebih terperinci3. BAB III METODE PENELITIAN
3.1 Alat dan Bahan Penelitian 3. BAB III METODE PENELITIAN Dalam penelitian dibutuhkan beberapa alat dan bahan untuk mendukung berjalannya perancangan dan implementasi sistem. 3.1.1 Alat Alat yang digunakan
Lebih terperinciSISTEM INFORMASI AKADEMIK PADA SMA KESATRIAN 2 SEMARANG BERBASIS ANDROID Nofri Fikry Hutama 1, Sudaryanto M.Kom 2
SISTEM INFORMASI AKADEMIK PADA SMA KESATRIAN 2 SEMARANG BERBASIS ANDROID Nofri Fikry Hutama 1, Sudaryanto M.Kom 2 1 Mahasiswa Sistem Informasi, Universitas Dian Nuswantoro Semarang 2 Dosen Pembimbing Sistem
Lebih terperinciBAB III ANALISIS DAN PERANCANGAN SISTEM
BAB III ANALISIS DAN PERANCANGAN SISTEM Bab ini akan menjelaskan sistem analisis dan perancangan pada Aplikasi Pembelajaran Fonetik Hanyu Pinyin Berbasis Android, tahap pertama adalah analisis dan di lanjut
Lebih terperinciBAB 4 IMPLEMENTASI. 1. Processor Intel Dual Core 2. Memory RAM 3 Gb 3. Harddisk 160 Gb 4. Modem GSM dan Wifi
BAB 4 IMPLEMENTASI Bab ini menjelaskan tentang implementasi dari tugas akhir yang terdapat kebutuhan perangkat keras, perangkat lunak sampai dengan implementasi basis data dan implementasi antar muka.
Lebih terperinciE-COMMERCE GOODY BAG SPUNBOND MENGGUNAKAN QR CODE BERBASIS WEB RESPONSIF PADA TOKO VANTACY SHOP
E-COMMERCE GOODY BAG SPUNBOND MENGGUNAKAN QR CODE BERBASIS WEB RESPONSIF PADA TOKO VANTACY SHOP Tri Listyorini 1) 1) Teknik Informatika UNIVERSITAS MURIA KUDUS Gondang Manis PO.BOX 53 Bae Kudus Email :
Lebih terperinciBAB 1 PENDAHULUAN. manusia mengalami evolusi. Berbagai aktivitas mengalami perubahan dari cara
BAB 1 PENDAHULUAN 1.1 Latar Belakang Perkembangan teknologi informasi membuat berbagai aktivitas dalam kehidupan manusia mengalami evolusi. Berbagai aktivitas mengalami perubahan dari cara konvensional
Lebih terperinciOtomatisasi Sistem Pembuatan Berita Acara dan Pelaporan Honor Ujian Skripsi Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
Otomatisasi Sistem Pembuatan Berita Acara dan Pelaporan Honor Ujian Skripsi Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Artikel Ilmiah Diajukan kepada Fakultas Teknologi Informasi untuk
Lebih terperinciBAB III DATA METODE PENELITIAN. berupa perangkat keras dan perangkat lunak. a. Sistem operasi windows 8.1.
BAB III DATA METODE PENELITIAN 1.1 Alat Alat yang digunakan untuk membuat website dalam penelitian ini berupa perangkat keras dan perangkat lunak. 1.1.1 Perangkat Keras a. Laptop b. Mouse 1.1.2 Perangkat
Lebih terperinciBAB III METODE PENELITIAN. Tugas Akhir ini dilaksanakan di Lab Teknik Komputer Jurusan Teknik Elektro
BAB III METODE PENELITIAN A. Waktu dan Tempat Penelitian Tugas Akhir ini dilaksanakan di Lab Teknik Komputer Jurusan Teknik Elektro Universitas Lampung pada April 2010 September 2010 B. Alat dan Bahan
Lebih terperinciII.3.5 Statechart Diagram... II-14 II.3.6 Activity Diagram... II-15 II.3.7 Component Diagram... II-16 II.3.8 Deployment Diagram... II-16 II.3.
DAFTAR ISI HALAMAN JUDUL LEMBAR PENGESAHAN... ii SURAT PERNYATAAN... iii ABSTRAK... iv ABSTRACT... v KATA PENGANTAR... vi DAFTAR ISI... viii DAFTAR TABEL... xii DAFTAR GAMBAR... xiii BAB I PENDAHULUAN...
Lebih terperinciBAB 1 PENDAHULUAN. berdampak di dalam segala aspek kehidupan manusia. Internet dapat membantu
BAB 1 PENDAHULUAN 1.1. Latar Belakang Perkembangan teknologi informasi, khususnya internet, dapat berdampak di dalam segala aspek kehidupan manusia. Internet dapat membantu orang dalam mempermudah pekerjaan
Lebih terperinciPEMBANGUNAN APLIKASI PASEBAN.COM BERBASIS MOBILE ANDROID
Bandung, 23 Februari 2011 PEMBANGUNAN APLIKASI PASEBAN.COM BERBASIS MOBILE ANDROID OLEH : GALIH FAUZI H. 10107621 Penguji 1 Penguji 2 Penguji 3 Ir. Taryana Suryana, M.kom. Irawan Afrianto, S.T., M.T. Dian
Lebih terperinciBAB I PENDAHULUAN... I-1
DAFTAR ISI LEMBAR PENGESAHAN... i SURAT PERNYATAAN... ii ABSTRAK... iii ABSTRACT... iv KATA PENGANTAR... v DAFTAR ISI... vii DAFTAR TABEL... xiv DAFTAR GAMBAR... xv DAFTAR LAMPIRAN... xix BAB I PENDAHULUAN...
Lebih terperinciCara Mengetahui Website Anda Responsive atau Tidak
Cara Mengetahui Website Anda Responsive atau Tidak [caption id="attachment_29882" align="aligncenter" width="1000"] Tampilan Responsive Website Anita's Personal Blog Komputer Fotografi (http://anitanet.staff.ipb.ac.id)
Lebih terperinciBAB 1 PENDAHULUAN. 1.1 Latar Belakang
BAB 1 PENDAHULUAN 1.1 Latar Belakang Try Out Ujian Nasional atau dengan kata lain dapat disebut dengan uji coba Ujian Nasional merupakan suatu bentuk ujian sebagai uji coba bagi setiap siswa/siswi sebelum
Lebih terperinciBAB 1 PENDAHULUAN. untuk diakses. Tidak heran smartphone dan PC tablet berkembang pesat,
BAB 1 PENDAHULUAN 1.1 Latar Belakang Dijaman yang sudah maju dan serba canggih ini orang lebih suka menggunakan segala sesuatu yang praktis, yang mudah dibawa dan mudah untuk diakses. Tidak heran smartphone
Lebih terperinciBAB III METODOLOGI. architecture, RAM 2 GB,.NET Framework 3.5 untuk akses client di device berbeda.
15 BAB III METODOLOGI 3.1. Tempat dan Waktu Peneltian Penelitian ini dilaksanakan di Ruang Server Biro Sistem Informasi (BSI) yang berlokasi di Gedung AR Fachruddin B Universitas Muhammadiyah Yogyakarta,
Lebih terperinci6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco
6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan
Lebih terperinciBAB III ANALISIS DAN PERANCANGAN. Dalam membangun aplikasi pembelajaran aksara sunda berbasis android
BAB III ANALISIS DAN PERANCANGAN 3.1 Analisis Sistem Dalam membangun aplikasi pembelajaran aksara sunda berbasis android dilakukan dengan beberapa tahap analisis, yaitu: 1. Pengumpulan data aksara sunda
Lebih terperinciBAB III METODE PENELITIAN. (Software Development Life Cycle). System Development Life Cycle (SDLC) adalah
BAB III METODE PENELITIAN 3.1 METODE PENGEMBANGAN SISTEM Untuk pengembangan sistem penelitian ini menggunakan model SDLC (Software Development Life Cycle). System Development Life Cycle (SDLC) adalah proses
Lebih terperinciAPLIKASI PEMBELAJARAN BURUNG ENDEMIK 3D DI PULAU JAWA BERBASIS WEBSITE MENGGUNAKAN BLENDER DAN HTML 5
APLIKASI PEMBELAJARAN BURUNG ENDEMIK 3D DI PULAU JAWA BERBASIS WEBSITE MENGGUNAKAN BLENDER DAN HTML 5 Nama : Ghaida Ratih Agustin Npm : 13112128 Jurusan : Sistem Informasi Pembimbing : Dr. Febriani, Skom.,
Lebih terperinciBAB V IMPLEMENTASI DAN PENGUJIAN. Perangkat lunak yang digunakan untuk pembuatan website sekolah ini yaitu
51 BAB V IMPLEMENTASI DAN PENGUJIAN 5.1 Implementasi Sistem Implementasi sistem merupakan tahap penempatan sistem agar dapat dioperasikan, dalam implementasi terdapat beberapa tahapan diantaranya sebagai
Lebih terperinciBAB III ANALISA DAN DESAIN SISTEM
BAB III ANALISA DAN DESAIN SISTEM III.1. Analisa Sistem yang Sedang Berjalan Proses yang sedang berjalan dalam penginformasian Lokasi Sarana Bantu Navigasi Pelayaran (SBNP), masih bersifat manual, yaitu
Lebih terperinciDAFTAR ISI. KATA PENGANTAR... i. DAFTAR ISI... iii. DAFTAR GAMBAR... vii. DAFTAR TABEL... ix. DAFTAR LAMPIRAN... x Latar Belakang Masalah...
DAFTAR ISI KATA PENGANTAR... i DAFTAR ISI... iii DAFTAR GAMBAR... vii DAFTAR TABEL... ix DAFTAR LAMPIRAN... x BAB I PENDAHULUAN 1.1. Latar Belakang Masalah... 1 1.2 Rumusan Masalah... 2 1.3 Tujuan... 2
Lebih terperinciDAFTAR ISI HALAMAN JUDUL... LEMBAR PERSETUJUAN... LEMBAR PENGESAHAN... iii. LEMBAR PERNYATAAN... iv RIWAYAT HIDUP... KATA PENGANTAR...
DAFTAR ISI HALAMAN JUDUL... Halaman i LEMBAR PERSETUJUAN... ii LEMBAR PENGESAHAN... iii LEMBAR PERNYATAAN... iv RIWAYAT HIDUP... v KATA PENGANTAR... vi DAFTAR ISI... vii DAFTAR TABEL... xi DAFTAR GAMBAR...
Lebih terperinciBAB IV IMPLEMENTASI DAN EVALUASI. implementasi desain dalam bentuk kode-kode program. Kemudian di tahap ini
BAB IV IMPLEMENTASI DAN EVALUASI 4.1 Kebutuhan Implementasi Setelah tahap analisa dan perancangan, tahap selanjutnya adalah implementasi desain dalam bentuk kode-kode program. Kemudian di tahap ini dijelaskan
Lebih terperinciBAB IV IMPLEMENTASI DAN PENGUJIAN
BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Setelah melakukan analisis dan perancangan terhadap Math Trick 4 untuk Sekolah Dasar yang berbasis multimedia. Pada bab ini penulis akan melakukan implementasi
Lebih terperinciBAB III ANALISIS DAN PERANCANGAN
BAB III ANALISIS DAN PERANCANGAN Bab ini akan menjelaskan sistem analisis dan perancangan pada aplikasi Website Try out Seleksi Mahasiswa Baru Universitas Mercu Buana. 3.1 Identifikasi Masalah Try Out
Lebih terperinciDaftar Isi. 2 P a g e
Daftar Isi A. Spesifikasi Website... 3 1. Spesifikasi Perangkat Lunak... 3 2. Komponen Website... 3 a. Panel Admin... 3 b. Website Utama... 4 B. Komponen Panel Admin... 4 1. Halaman Login... 4 a. Petunjuk
Lebih terperinciCara Membuat website dengan Dreamweaver
Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See
Lebih terperinciPertemuan V. Semester 1
Frames dan iframes ++ Video dan Audio Pertemuan V Pemrograman Web Dasar Semester 1 Frame HTML Frame digunakan untuk menampilkan banyak dokumen html lainnya dalam satu halaman browser pada saat yang sama.
Lebih terperinci