Kamis, 09 Juli 2015

REVIEW HTML5
Nama : Achdiyat Kusuma
NPM : 50413073
Kelas : 2IA17
Universitas Gunadarma


ABSTRAK
            Abstrak Perkembangan teknologi web saat ini banyak digunakan pengembang software. Kebutuhan menggunakan teknologi ini sangat dibutuhkan sebagai media layanan informasi berbasis web. Akan tetapi, dengan perkembangan dalam berbagai bidang teknologi. Oleh karena itu, dibangunlah banyak Aplikasi dalam berbagai bidang yang berbasis HTML5 dengan tujuan agar dapat memenuhi kebutuhan informasi yang dapat diakses oleh pengguna yang membutuhkan. HTML5 dapat berguna untuk berbagai macam masalah seperti ; Menyederhanakan proses pembuatan presentasi berbasis web dengan menggunakan fitur HTML5 dan JavaScript, Membuat aplikasi utama antrian pelayanan nasabah bank yang informatif dan menarik, Membangun aplikasi mobile android berbasis HTML5
Kata Kunci : HTML5, Mobile Android, Slides5, Web Based.
           
1.     PENDAHULUAN
Pada kesempatan kali ini penulis diberi tugas Softskill universitas gunadarama dengan materi membuat review dari 3 jurnal yang bersangkutan dengan TI. Dalam kesempatan kali ini penulis akan mengambil tema untuk tugas softkill ini yaitu HTML, lebih sepesifiknya HTLM5 yang merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari WWW (world wide web) sebuah teknologi inti dari internet. HTML5 adalah revisi kelima dari HTML yang pertama kali diciptakan pada tahun 1990. Penulis ingin dengan membuat review ini dapat sedikit mempermudah banyak orang yang menggunakan, mempelajari, atau bahkan tidak tau sama sekali tentang HTML5.
Berikut adalah jurnal yang akan di review oleh penulis untuk tugas softskill kali ini :
a.       Pembuatan Aplikasi Tampilan Utama dalam Sistem Antrian Layanan Nasabah di Bank Berbasis Web dengan memanfaatkan HTML5, Oleh Hendra Dinata dan Lisana.
b.      Rancang Bangun Aplikasi Pembuatan Presentasi Berbasis Web Menggunakan HTML5, Oleh Prima Astiadi, dan Oesman Hendra Kelana.
c.       Perancang Bangun Aplikasi Mobile pada Platform Android berbasis HTML5 Studi Kasus Layanan Informasi Website UNIPDU Jombang, Oleh Mita Septiana Chumairoh, Budiman, dan Diema Hernyka Satyareni.
Masing – masing jurnal menjelaskan tentang berbagai macam penggunaan HTML5. Pada Jurnal pertama HTML 5 digunakan untuk membuat sebuah aplikasi berupa tampilan utama interface antrian nasabah di bank. Aplikasi tampilan utama ini bertujuan untuk menyajikan informasi yang bersifat user friendly, informatif, dan menarik sehinggan akan mengurangi tingkat kejenuhan Nasabahnya yang biasnya mengantri panjang dan lama di bagian Customer Service. Dengan memanfaatkan teknologi HTML 5, aplikasi tampilan utama yang dibuat dengan berbasis web ini pun dapat memuat konten video di dalamnya tanpa harus menyertakan plugins tambahan di dalam paket instalasinya untuk memutar video.
Pada jurnal kedua bertujuan untuk menyederhanakan proses pembuatan presentasi berbasis web dan memberikan solusi atas permasalahan kompatibilitas pada aplikasi mandiri. HTML5 merupakan teknologi web terbaru yang terus dikembangkan dan akan segera menjadi penerus dari generasi HTML sebelumnya. Layanan pembuatan presentasi berbasis web yang dimaksud akan memanfaatkan fitur HTML5 dan JavaScript untuk menghadirkan aplikasi berbasis web yang ramah pengguna, dengan menitikberatkan dalam menerima masukan berupa teks dan mengelolanya menjadi presentasi berbasis web. Aplikasi pembuatan presentasi berbasis web yang bernama Slides5 ini menyediakan antarmuka pembuatan presentasi dengan fitur-fitur seperti penambahan dan penghapusan slide, pengubahan tampilan dan tata letak slide, serta penyimpanan dan pengunduhan berkas presentasi. Melalui sejumlah uji coba, Slides5 telah berhasil dalam membuat materi presentasi berbasis web tanpa harus melakukan pemrograman. Selain itu, Slides5 menyediakan fitur penyimpanan presentasi ke dalam bentuk berkas HTML sehingga presentasi dapat dilakukan hanya dengan menggunakan peramban web saja.
Jurnal ketiga tentang Aplikasi Web Mobile Android berbasis HTML5 dengan tujuan agar dapat memenuhi kebutuhan informasi yang dapat diakses melalui perangkat mobile. Aplikasi ini dilengkapi dengan notifikasi pengumuman untuk mahasiswa dan notifikasi pendaftaran online untuk admin PMB. Aplikasi mobile yang dibangun mengimplementasikan tiga teknologi yaitu HTML5,  Hybrid Application yang digunakan untuk membangun aplikasi mobile di android, dan Google Cloud Messagging sebagai penyedia layanan cloud messaging yang digunakan untuk mengirim notifikasi ke perangkat android. Aplikasi ini berupa installer yang dapat diinstall di perangkat mobile android.



2.     TINJAUAN PUSTAKA

2.1.HTML5
 HTML adalah sebuah bahasa markup yang menjadi pusat dari struktur desain sebuah website (Powell, 2010). Kode yang berada di belakang setiap tampilan halaman website ini memungkinkan pengembang website untuk menciptakan tampilan dari sebuah halaman website sesuai dengan yang diinginkannya. Dikembangkan pertama kali oleh Tim Berners-Lee pada tahun 1989, HTML menjadi bahasa markup yang terus berkembang hingga saat ini (David, 2010). Salah satu hal yang menyebabkan HTML menjadi bahasa yang sukses dalam perkembangannya adalah konsep sederhana akan penggunaan tag yang menandai awal maupun akhir dari sebuah bagian. Hingga saat ini, HTML4 menjadi bahasa markup standar yang digunakan untuk mengembangkanwebsite. Pada tahun 2007, sebuah tim yang bernama Web Standards Project memulai untuk membuat generasi penerus dari HTML, yaitu HTML generasi ke 5 (David, 2010). HTML5 menyertakan pendefinisian ulang dari element markup yang ada dan pendefinisian elemen- elemen baru yang memungkinkan para pendesain web untuk lebih ekspresif dalam semantik dari markup-nya (Glodstein, 2011). Dengan tujuan memberikan standar yang memungkinkan untuk menjalankan aplikasi dalam sebuah peramban web, HTML5 memperkenalkan beberapa fitur-fitur baru, beberapa diantaranya adalah: Elemen HTML baru, Geolocation APIs (Application Programming Interface), Localdata APIs, Forms 2.0., dukungan untuk video dan audio, CSS3, pencitraangambar 2 dimensi dan 3 dimensi,JavaScript2.0. HTML5 kompatibel dengan versi-versi sebelumnya. Semua spesifikasi fitur HTML4 ada dalam HTML5, bahkan mengalami perubahan dan pengembangan (Clark, 2012). Perbedaan utama HTML5 dan HTML 4 adalah adanya tambahan API (Application Programming Interfaces) Javascript dalam spesifikasinya. Tambahan API ini memampukan adanya interaksi dengan elemen multimedia di dalam peramban (Devlin, 2012). HTML5 juga mengembangkan antarmuka pengguna (user interface), kemampuan akses (accessability), efek visual (visual effect), multimedia yangsemakin tidak bergantung pada plug-ins, danweb sockets yang menjadikan koneksi denganwebservermenjadi lebih persisten(Hogan, 2013). Seperti pendahulunya, HTML5 dirancang sebagai bahasa yang cross-platform, penggunaannya tidak didasarkan pada platform dimana HTML5 itu sendiri berjalan. Yang dibutuhkan untuk memanfaatkan fitur-fiturnya hanyalah sebuah peramban web yang modern. Secara umum, semua peramban web telah mengadopsi HTML4 sebagai standar. Namun, HTML5 mulai banyak diaplikasikan pada banyak website di internet. Hal itu diikuti oleh peramban web ternama seperti Chrome, Opera, Mozilla Firefox, Safari, dan Internet Explorer yang memberikan dukungan untuk HTML5 (Sanders, 2011). Hal ini menunjukkan bahwa HTML5 akan segera menjadi standar sebagai bahasa markupuntukweb. Gambar 1 mengambarkan aplikasi HTML5 beserta komponen-komponennya. Bagian atas tertera aplikasi-aplikasi yang ada dalam HTML5, yakni HTML, CSS, dan Javascript, dimana aplikasi-aplikasi ini dibangun berdasarkan komponen-komponen yang ada di bagian bawah, yakni JavaScript API, HTML5markup,dan CSS3 (Gustafson,2013). Ada dua organisasi yang membuat spesifikasi HTML5, yakni W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). HTML5 pada mulanya ditulis oleh WHATWG, yang didirikan pada tahun 2003, dengan anggota-anggotanya yang terdiri dari: Apple, Mozilla, dan Opera.  Pada tahun 2006, W3C membentuk sendiri kelompok kerja untuk HTML5 berdasarkan atas kerja yang telah dilakukan WHATWG. Kedua lembaga ini menghasilkan spesifikasi yang tidak terlalu jauh berbeda (Robbins, 2013).
2.2.Javascript
Javascript Javascript adalah sebuah bahasa scripting untuk sebuah web yang dijalankan dari sisi client. Ke dalam sebuah halaman HTML, kode Javascript biasa digabungkan. Kegunaan dari Javascript antara lain adalah untuk mendeteksi browser, proses validasi form, dan lain sebagainya. Untuk dapat menambahkan script Javascript ke dalam halaman HTML, maka diperlukan tag <script>, dan dapat diletakkan pada bagian mana saja dari halaman HTML itu. Berikut adalah contoh penggunaannya:
 



2.3.AJAX
AJAX Ajax (Asynchronous JavaScript and XML) bukanlah sebuah bahasa pemrograman baru. Ajax adalah suatu cara yang memungkinkan untuk melakukan pertukaran data dengan server yang dilakukan melalui sebuah background process. Artinya sebuah halaman web dapat memperbarui sebagian dari dirinya tanpa harus memuat ulang keseluruhan halaman web. Prinsip kerja dari AJAX dapat digambarkan pada gambar 2. di bawah ini.
2.4.PHP
PHP (PHP Hypertext Preprocessor) adalah sebuah bahasa scripting dari sisi server untuk sebuah web. Kode PHP sendiri dapat digabungkan ke dalam sebuah halaman HTML, meski kode PHP itu sendiri akan dieksekusi di sisi server untuk kemudian diolah menghasilkan HTML yang akan dikirim ke browser client. 
Sintak penulisan PHP diawali dengan tanda “<?php” dan diakhiri dengan tanda “?>” (tanpa tanda kutip). Berikut adalah contoh penulisan script PHP:
2.5.Framework
Dalam pengembangan sebuah website, dibutuhkan aktivitas pemrograman yang banyak melibatkan penggunaan kode-kode maupun operasi yang berulang-ulang. Pada umumnya, penataan kode pemrograman untuk manipulasi data, penggunaan logika, dan tampilan menjadi satu dalam sebuah halaman atau berkas. Hal ini cukup merepotkan ketika pengembang harus melakukan perubahan pada program, dan lebih merepotkan lagi apabila pengembang terdiri dari beberapa orang yang tergabung dalam sebuah tim kerja. Tak jarang, hal ini disadari saat kode program telah berkembang menjadi begitu kompleks. Oleh karena itu, diperlukan sebuah kerangka kerja yang dapat menyederhanakan pengkodean program dan meminimalkan pengulangan kode-kode yang tidak diperlukan. Kerangka kerja inilah yang disebut dengan framework.
Secara umum, framework dapat diartikan sebagai alat yang dapat digunakan untuk membantu seseorang dalam melakukan sebuah pekerjaan. Definisi framework secara khusus adalah sebuah susunan atau rangkaian kerja yang tetap dan dibuat sedemikian rupa yang kemudian dapat digunakan kembali dalam sebuah aktifitas kerja yang lain namun tetap dalam satu area kerja yang sama dengan rangkaian kerja sebelumnya. Web framework memiliki definisi kumpulan sebuah maupun banyak modul-modul dalam bentuk class library yang dapat digunakan kembali untuk membentuk sebuah aplikasi web yang lebih besar dengan memanfaatkan modul-modulclass librarytersebut.
Dalam penggunaan framework, masih dibutuhkan penulisan-penulisan kode pemrograman yang disesuaikan dengan lingkungan framework yang digunakan. Framework menyediakan lingkungan pengembangan yang terstruktur, serta menyediakan berbagai macam fungsi siap pakai yang dapat digunakan dalam pengembangan website. Selain itu, tersedianya kerangka pola kerja terstandar akan mempermudah pengembang website untuk memahami kode pemrograman yang ditulis oleh rekan lain saat bekerja di dalam sebuah tim kerja.
Website yang dinamis, seperti halnya softwareaplikasi, terdiri dari tiga buah komponen: data, presentation, dan logic. Dalam istilah framework web, komponen ini dikenal dengan istilah: model, view, dan controller. Ketika membuat website yang sederhana, ketiga komponen ini bercampur dan tidak menjadi masalah. Tetapi ketika membuat website besar dan kompleks, bercampurnya ketiga komponen ini akan menjadi masalah karena akan menimbulkan kesulitan dalam penanganannya. Untuk menangani masalah ini, ketiga komponen tersebut harus dipisahkan dalam bagian-bagian yang berbeda, dan penulisan kode program juga harus bersifat terpisah (loosely). Dengan menghilangkan saling ketergantungan antar komponen maka website yang dibuat akan lebih mudah dalam penanganannya (manageable), pengujian (testable), dan pengembangan (scalable) (Gilmore, 2011).
Ada banyak framework yang telah beredar, beberapa diantaranya yang cukup populer adalah CodeIgniter, YII Framework, Kohana, Ruby on Rails, dan CakePHP. Tentunya masing- masing framework memiliki standar pola kerja yang berbeda-beda, dengan masing-masing kelebihan dan kekurangannya.
2.6.FuelPHP
FuelPHP merupakan sebuah PHP web framework yang masih tergolong baru, sederhana, fleksibel serta didukung oleh komunitas yang dikembangkan berdasar ide-ide terbaik dari PHP framework lainnya. Pengembangannya dimulai sejak tahun 2010 oleh Dan Horrigan yang tidak lama kemudian berkembang dengan masuknya Phil Sturgeon, Jelmer Schreuder, dan Harro Verton ke dalam tim pengembang. Tim tersebut telah memiliki pengalaman mengenai PHP selama kurang lebih satu dekade, dan telah terlibat dalam beberapa proyek Open-Source seperti CodeIgniter, PyroCMS, ExiteCMS,dan DataMapper ORM.
Filosofi dari FuelPHP yaitu mengambil pendekatan yang berbeda dengan kebanyakan framework dan berusaha untuk menjadi framework yang didukung oleh komunitas. FuelPHP menjadi sebuah MVC (Model-View-Controller) framework yang didesain dengan baik untuk memiliki dukungan penuh untuk HMVC (Hierarchial Model-View-Controller) sebagai bagian dari arsitekturnya. Tidak hanya itu, FuelPHP juga menambahkan ViewModel yang merupakan sebuah class yang berisikan logika yang membantu dalam membangun View itu sendiri. Selain itu, FuelPHP juga memberikan perhatian terhadap keamanan terhadap website untuk mencegah penyerangan-penyerangan yang mungkin dilakukan oleh pihak-pihak yang tidak diketahui seperti XSS attack, SQLinjection, dan lain sebagainya. Fitur lain yang didukung oleh FuelPHP: (1) Class yang bersifat modular dan extendsible. (2) Oil, sebagai utilitas baris perintah yang dapat mempercepat pengembangan website dengan kemampuannya yang dapat membantu dalam hal pengujian maupun pencarian kesalahan dalam pengkodean. (3) Object Relational Mapper(ORM) danActive Recordyang membantu dalam melakukan operasi pada basis data.
2.7.Teknologi Google Cloud Messaging (GCM)  for Android
Diambil dari situs resminya http://developer.android.com/google/gcm/i ndex.html, Google Cloud Messaging (GCM) untuk Android  adalah layanan yang memungkinkan untuk mengirim data / pesan dari server ke perangkat Android, atau sebaliknya untuk menerima data / pesan dari perangkat ke server pada koneksi yang sama. Layanan GCM menangani semua aspek antrian pesan dan pengiriman ke target aplikasi Android yang berjalan pada perangkat target. GCM gratis tidak peduli seberapa besar kebutuhan messaging dan tidak ada kuota. GCM mamiliki Cloud Connection Service (CCS) yang memungkinkan dapat berkomunikasi dengan perangkat Android melalui koneksi XAMPP persisten. Keuntungan utama dari CCS adalah kecepatan, dan kemampuan untuk menerima pesan hulu (yaitu, pesan dari perangkat ke cloud). Berikut adalah arsitektur dari GCM. 



Gambar 1. Arsitektur GCM 
Dari gambar di atas dapat dijelaskan bahwa, perangkat mobile harus mendapatkan ID dari GCM dengan melakukan register terlebih dahulu (1) dan (2). Kemudian, ID tersebut akan disimpan pada server (3). Selanjutnya jika terdapat perubahan data pada server atau dengan kata lain admin memposting informasi/ pengumuman, dengan segera server membertahu GCM (a) untuk meneruskan informasi kepada perangkat mobile berupa notifikasi (b). Cara kerja GCM ini yang menjadi landasan dari pengembangan website Unipdu ke arah mobile android.



3.     PEMBAHASAN

HTML5 dapat digunakan untuk berbagai macam hal. Dari review diatas kita dapat mengetahui berbagai contoh kegunaan HTML5 dalam kehidupan sehari – hari. Sesuai dengan masing – masing jurnal :
1.      Pembuatan Aplikasi Tampilan Utama dalam Sistem Antrian Layanan Nasabah di Bank Berbasis Web dengan memanfaatkan HTML5, Oleh Hendra Dinata dan Lisana.

Dalam Jurnal ini ditunjukan cara untuk membuat sebuah tampilan utama dari sistem antrian di Bank yang di bangun menggunakan aplikasi berbasis web, dapat menyajikan lebih banyak informasi dibandingkan jika hanya menggunakan alat PI 8255. Untuk menampilkan konten video dapat menggunakan format yang telah menjadi standard baru pada format HTML 5. Sedangkan bagi pengguna, proses instalasinya akan lebih sederhana, karena pengguna cukup melakukan instalasi sebuah browser client yang mendukung format HTML 5 tanpa harus menginstal plugins tambahan.
1.     Desain Sistem
Pada sub bab ini akan dijelaskan tiga bagian desain aplikasi yang dibuat yaitu desain proses, desain basis data, dan desain antarmuka (user interface). 
1.1  Desain Proses
Desain proses akan menjelaskan langkah-langkah yang akan dilakukan dalam implementasi program tanpa bergantung pada bahasa pemrograman tertentu. Desain proses terdiri atas tiga desain proses utama yaitu: desain proses update nomor antrian, desain proses update informasi kurs mata uang, dan yang ketiga adalah desain proses update informasi lainnya. 

1.1.1        Desain Proses Update Nomor Antrian.
Proses update nomor antrian adalah proses yang berkelanjutan untuk menampilkan nomor antrian dengan memanfaatkan basis data sebagai tempat penyimpanan data nomor antrian. Data nomor antrian akan ter-update jika salah seorang CSO (Customer Service Officer) menekan tombol melalui program controller yang ter-install di komputernya untuk memanggil nasabah dengan nomor antrian berikutnya. Sementara program tampilan utama yang dibahas dalam aplikasi ini akan berkelanjutan per 1 detik untuk memeriksa apakah data nomor antrian di dalam basis data telah berubah dengan data yang baru. Jika data ternyata telah berubah maka program akan mengambil data nomor antrian itu beserta nomor loket CSO, dan mencatat ID sebagai penanda kapan data terakhir kali berubah. Proses ini dapat dilihat pada Gambar 3. 
1.1.2        Desain Proses Update Informasi Kurs Mata Uang.
Proses update informasi kurs mata uang ini adalah proses yang berkelanjutan untuk menampilkan informasi kurs mata uang pada halaman program tampilan utama ini. Data kurs diambil dari sebuah text file yang terdapat di lokasi tertentu di dalam server cabang. File ini sendiri merupakan kiriman dari server yang ada di kantor pusat bank bersangkutan per periodic waktu, biasanya adalah per 15 menit sekali dengan pertimbangan untuk menghindari beban pada jalur komunikasi yang terlalu padat. Namun bagaimana proses pengiriman file dari server kantor pusat ke server cabang itu sendiri tidak tercakup dalam pembahasan pada penilitian kali ini. Proses ini dapat dilihat pada Gambar 4. 
1.1.3        Desain Proses Update Informasi Lainnya.
Proses update informasi lainnya mencakup informasi suku bunga, teks berjalan, serta konten video. Informasi suku bunga serta informasi untuk teks berjalan oleh program tampilan utama ini diambil dari sebuah text file yang berada pada lokasi tertentu di dalam server cabang, yang merupakan kiriman dari server yang ada di kantor pusat. Begitu juga video yang hendak ditampilkan di halaman program tampilan utama berasal dari file video hasil kiriman dari server kantor pusat dan ditempatkan pada lokasi tertentu di dalam server cabang. Berbeda dengan proses update informasi kurs mata uang, file informasi suku bunga, teks berjalan, dan file video ini tidak dikirim secara terus menerus tiap 15 menit sekali oleh server kantor pusat, melainkan dalam periode waktu yang lebih lama, yaitu satu hari sekali, atau bahwa bisa lebih dari sebulan sekali, contohnya informasi suku bunga yang bersifat konsisten untuk satu bulan ke depan. Oleh karena proses pengambilan informasi oleh program tampilan utama dari server di cabang hanya dilakukan satu kali saja, yaitu pada saat program pertama kali dinyalakan, untuk seterusnya ditampilkan secara terus menerus. Proses ini dapat dilihat pada Gambar 5.  

1.2          Desain Basis Data
Untuk menyimpan nomor antrian di dalam sistem antrian ini dibuatkan sebuah basis data yang relasinya. Gambar 6. menunjukkan Entity Relationship Diagram serta hasil pemetaan dari nomor antrian. Data yang disimpan tidak mempunyai ketergantungan pada bahasa pemrograman yang akan digunakan. Data disimpan sedemikian rupa sehingga penambahan, pengambilan dan perubahan data dapat dilakukan dengan mudah dan terkontrol.


Pada Tabel 3. dapat dilihat kamus data dari tabel antrian, Tabel 4. adalah kamus data dari tabel CSO, dan Tabel 5. adalah kamus data dari tabel Panggil.


1.3          Desain Antarmuka
Antarmuka pada program tampilan utama sistem antrian ini didesain sedemikian rupa sehingga dapat menyajikan semua informasi yang dimiliki. Informasi yang hendak ditampilkan yaitu: informasi nama cabang, informasi nomor antrian, informasi kurs mata uang, informasi tabel suku bunga, informasi pada teks berjalan, serta konten video. Berikut adalah desain antarmuka pada program tampilan utama sistem antrian.


Pada desain antarmuka di atas, dapat dilihat bahwa semua informasi yang dibutuhkan sudah dapat disajikan. Di sebelah kiri halaman terdapat informasi nama bank, tanggal dan waktu, nomor antrian, dan informasi kurs mata uang. Di sebalah kanan terdapat konten video dan table suku bunga. Di bagian bawah halaman dipakai untuk menampilkan informasi pada teks berjalan. 
Secara umum, di samping informasi tentang nomor antrian itu sendiri, informasi yang dimiliki oleh pihak bank yang hendak diinformasikan kepada pelanggan melalui layar tampilan program antrian antara lain: 1. Informasi suku bunga untuk produk-produk tabungan atau deposito, maupun suku bunga kredit 2. Informasi kurs mata uang asing 3. Informasi produk perbankan lainnya yang menjadi unggulan dari bank yang bersangkutan 
Keseluruhan data yang hendak ditampilkan di layar tampilan dari sistem antrian terdapat di dalam server pada masing- masing cabang. Dan untuk dapat menyajikan informasi-informasi yang dibutuhkan, maka tampilan halaman web dibuat sedemikian rupa sehingga mampu menampungmya.  
Setiap konten pada halaman ini mengambil data dari database yang dibangun menggunakan database MySQL 5. Sementara bahasa pemrograman yang digunakan untuk mengakses mengolah data adalah dengan menggunakan PHP 5. Karena halaman web ini berjalan di browser client, maka proses update atau proses untuk memperbarui konten akan diulang per sekian dengan menggunakan script Javascript. Untuk menjembatani antara script Javascript yang berjalan di browser client agar dapat mengakses halaman PHP di server, maka dipergunakanlah AJAX. Untuk menghindari delay yang lebih lama saat menampilkan nomor antrian baru di halaman, maka dapat digunakan pseudo code di atas namun waktu perulangannya yang dikurangi hingga 1000 millisecond. 
Dan khusus untuk menampilkan konten video, semisal video promosi berbagai produk perbankan yang ditawarkan, dapat memanfaatkan format video yang telah disediakan oleh HTML 5, yaitu dengan menggunakan tag <video>, di mana sumber video didapat dari server cabang. Format video yang digunakan dalam penelitian ini adalah yang berjenis MPEG4, juga diujicobakan video berformat OGG. 
Halaman web dapat ditampilkan dengan baik dengan mengujicobakannya menggunakan browser Google Chrome versi 6.0.472.0 pada layar beresolusi 1280x800, seperti tampak pada Gambar 8. Untuk menghindari tampilnya element dari browser, seperti tab bar, address bar, dan lain-lain, maka user dapat menekan tombol F11 untuk tampilan penuh di layar.

            Screenshot tampilan utama Aplikasi

2.      Rancang Bangun Aplikasi Pembuatan Presentasi Berbasis Web Menggunakan HTML5, Oleh Prima Astiadi, dan Oesman Hendra Kelana.

Menjelaskan tentang kegunaan Slides5 sebagai layanan pembuatan presentasi berbasis web dapat membantu dalam membuat materi presentasi berbasis web dengan mudah, dan Berkas presentasi dalam format HTML yang dapat diterima oleh mayoritas peramban web dapat menjadi solusi atas permasalahan kompatibilitas yang ditemui pada aplikasi standalonepembuatan presentasi.

Analisis dan Perancangan Sistem

1.1.Desain Sistem.

Berikut adalah gambaran sitemap dari aplikasi pembuatan presentasi berbasis web. Pada tahapan awal, pengguna mengunjungi website yang dimaksud. Pada halaman utama, pengguna diberikan pilihan secara langsung untuk dapat memulai aktivitas pembuatan presentasi. Proses pertama yang dilalui adalah pemilihan tema presentasi yang akan dibuat. Sistem memberikan beberapa pilihan tema untuk dapat dipilih oleh pengguna. Proses berikutnya adalah aktivitas pembuatan presentasi itu sendiri. Pada tahapan awal, sistem akan mengecek apakah pengguna memiliki data presentasi lama yang pernah dibuat sebelumnya. Jika pengguna memiliki data tersebut, maka akan diberikan pilihan untuk dapat memuat kembali data presentasi yang lama. Mengenai proses penyimpanan data presentasi akan dijelaskan pada bagian selanjutnya. Di halaman pembuatan presentasi, pengguna akan dibantu oleh editor untuk dapat melakukan pemformatan pada teks yang menjadi masukan. Selain itu, disediakan juga beberapa fungsi untuk memanipulasi slide seperti menambah slide presentasi, menghapusslidepresentasi, dan lain sebagainya.

Gambar Sitemap

Setelah pengguna selesai dalam pembuatan presentasi yang diinginkan, maka pengguna dapat menyimpan presentasi yang dibuat dengan melakukan klik pada tombol save (process). Dengan mengakses tombol save, maka sistem akan memberikan kotak dialog untuk dapat memasukkan judul dari presentasi. Judul presentasi yang dimasukkan oleh pengguna nantinya akan menjadi title dari halaman presentasi yang dimaksud. Apabila judul dari presentasi telah dimasukkan, berikutnya sistem akan melakukan dua tahapan. Pertama, sistem akan mencatat isi presentasi dan disimpan dalam localStorage apabila peramban web yang digunakan oleh pengguna mendukung penggunaan localStorage. Kedua, sistem akan melakukan proses pencatatan isi dari presentasi yang dibuat oleh pengguna. Setelah proses pencatatan selesai, maka presentasi telah siap untuk diunduh dan sistem akan melakukan redirect ke halaman unduh. Pengguna juga dapat mengunduh presentasi yang telah selesai diproses sehingga praktis untuk dibawa melalui alat penyimpanan data portabel sepertithumbdrive,compact-disc, dan lain sebagainya.

1.2.Desain Program

1.2.1.   Pemilihan Tema Presentasi.
Pada tahapan awal, pengguna diharuskan memilih tema yang akan digunakan untuk presentasi yang akan dibuat. Setelah pengguna memilih tema, maka sistem akan melakukan proses berikutnya untuk menciptakan presentasi baru.
1.2.2. Pembuatan Presentasi
Proses berikutnya adalah proses pembuatan presentasi itu sendiri. Pada halaman pembuatan presentasi, pengguna akan dibantu oleh beberapa fungsi JavaScript pendukung pembuatan presentasi. Pemanfaatan fungsi dalam bentuk JavaScript yang bersifat client-side akan sangat membantu dalam proses pembuatan presentasi, sehingga meminimalkan lalu lintas antara pengguna dan server. Beberapa fungsi pendukung itu antara lain: add slide, delete slide, change layout, change alignment, enable dragging, save, download, load old slide.

1.3.Implementasi dan Pengujian

Pada tahapan awal, akan dilakukan pembuatan program per bagian kecil. Seperti yang telah dijelaskan sebelumnya, FuelPHP akan digunakan sebagai framework dalam pengembangan aplikasi presentasi berbasis web. Dengan pengembangan per bagian kecil, diharapkan dapat mempercepat pengembangan dengan berfokus pada masing-masing bagian tersebut. Selain melakukan pengembangan, juga dilakukan pengujian untuk masing-masing komponen yang telah selesai dibuat. Hal ini dilakukan untuk menguji apakah fungsi dari komponen tersebut sudah dapat berjalan dengan baik dan benar. Tahapan berikutnya yaitu melakukan proses integrasi untuk masing-masing komponen yang telah dibuat dan diuji sebelumnya. Di samping itu, pengujian juga dilakukan terhadap aplikasi secara keseluruhan untuk menguji kembali fungsi dari masing-masing komponen. Pengujian juga mencakup bagaimana interaksi antara pengguna dan sistem. Semuanya dilakukan untuk mendapatkan hasil yang maksimal dengan meminimalkan kesalahan-kesalahan maupun hal-hal yang kurang berguna. Setelah penggabungan dan pengecekan aplikasi secara utuh telah selesai, maka akan dilakukan optimisasi dengan menggunakan Smart Optimizer. Seperti yang telah dijelaskan sebelumnya, Smart Optimizer berguna dalam melakukan kompresi berkas-berkas web sebelum dikirim kepada pengguna agar beban pengunduhan halaman dapat dioptimalkan. Hal ini sangat berguna khususnya di halaman pembuatan presentasi karena ada cukup banyak berkas webyang harus diunduh dalam sekali waktu.




1.4.Operasi dan Pemeliharaan

Tahapan terakhir yaitu tahap pengoperasian dan pemeliharaan terhadap aplikasi berbasis web yang dibuat. Pengoperasian dilakukan dengan melakukan mengunggah berkas-berkas website dari posisi lokal ke server web. Di samping itu, pemeliharaan juga dilakukan untuk mengetahui kinerja sistem secara utuh. Salah satu pemeliharaan yang dilakukan dalam website ini adalah penghapusan berkas- berkas presentasi yang sudah tidak terpakai. Setiap kali pengguna membuat presentasi, akan tercipta satu berkas presentasi baru di server. Hal ini akan menyebabkan penumpukan berkas- berkas presentasi seiring dengan semakin banyaknya pengguna yang memanfaatkan website ini. Oleh karena itu dibutuhkan sebuah fungsi yang dapat mengatur penghapusan berkas-berkas presentasi dengan batas tertentu. Website akan menyimpan semua file presentasi yang pernah dibuat dalam kurun waktu 30 hari. Berkas presentasi yang memiliki usia lebih dari 30 hari terhitung sejak tanggal pembuatan akan dihapus dari server. Fungsi penghapusan berkas ini nantinya akan diset dengan menggunakan cron job sehingga akan berjalan dengan sendirinya tanpa perlu secara manual mengakses fungsi tersebut. Selain itu, tidak menutup kemungkinan untuk dilakukan pengembangan ke arah yang lebih lanjut untuk membuat aplikasi terkait dapat berguna serta berfungsi dengan lebih baik lagi.

2.    Hasil dan Pembahasan.

Pada bagian ini, akan dijelaskan hasil dari aplikasi yang telah dibuat beserta dengan beberapa gambar untuk mendukung penjelasan yang ada. Pengujian dapat dilakukan langsung dengan mengakses alamathttp://slides5.com/.




2.1.Front End

Front end dari website Slides5 menerapkan prinsip single page website. Single page website menjadi sebuah cara penyajian yang baik dengan mengumpulkan semua informasi yang berguna mengenai website terkait dalam satu halaman utuh. Hal ini tentunyamemberikan keuntungan tersendiri bagi pengunjung yang mengakses website tersebut karena semua kode yang dibutuhkan seperti HTML, JavaScript, dan CSS didapatkan dengan sekali unduh. Di samping itu, hal ini juga memudahkan pemrogram dalam melakukan pengembangan website sehingga tidak perlu menciptakan halaman view yang terlalu banyak. Setelah semua komponen yang dibutuhkan telah siap, maka pengguna akan mendapatkan akses ke semua informasi dasar yang ada di website terkait.  Halaman utama dari Slides5 dibagi menjadi tiga bagian kecil yaitu frequently asked question, about, dancreate presentation.

Halaman beranda Slide5

2.1.1.      Frequently Asked Question

Bagian ini berisi tentang segala informasi dasar yang mungkin dibutuhkan oleh pengguna saat pertama kali mengunjungi website ini. Selain itu bagian ini juga berisi informasi yang harus diperhatikan oleh pengguna seperti informasi mengenai peramban web yang didukung, ekstensi dari berkas file yang diciptakan, dan lain sebagainya.

Bagian FAQ
           
2.1.2.      About

Bagian ini berisi penjelasan singkat seputar Slides5 seperti tujuan, dan kegunaan dari website terkait. Selain itu bagian ini juga berisi informasi berupa alamat email yang dapat dituju apabila pengguna memiliki pertanyaan mengenai websiteterkait.

Gambar Bagian About pada Slides5

2.1.3.      Create Presentation

Bagian ini adalah bagian dimana pengguna dapat memulai untuk membuat presentasi. Pada bagian ini, pengguna dihadapkan dengan beberapa pilihan tema yang telah disediakan. Saat website ini dikembangkan, terdapat sembilan buah pilihan tema dan tidak menutup kemungkinan untuk tambahan tema-tema lain di masa mendatang. Untuk memulai membuat presentasi, pengguna harus memilih salah satu tema yang ada. Setelah pengguna selesai memilih tema yang diinginkan, pengguna dapat melanjutkan ke tahapan berikutnya dengan mengakses tombol proceedyang telah disediakan.

Gambar Bagian Create Presentation pada Slides5

2.2.Halaman Pembuatan Presentasi

Halaman ini adalah halaman dimana pengguna dapat mulai berinteraksi dengan aplikasi untuk menciptakan presentasi yang diinginkan. Pada halaman ini, pengguna akan bekerja dengan tema presentasi yang telah dipilih pada proses sebelumnya. Berikut adalah tampilan dari halaman pembuatan presentasi. Seperti yang terlihat pada Gambar, halaman pembuatan presentasi ini dapat dibagi menjadi tiga bagian utama, yaitu: (1)Action panel (2)Area penyuntingan (3)Area navigasi.                  

Gambar7.Halaman pembuatan presentasi

2.2.1.      Action Panel
Bagian ini terletak di sisi atas halaman pembuatan presentasi, berisi fungsi-fungsi yang berguna dalam membantu pengguna untuk membuat presentasi. Semua fungsi yang ada memiliki kegunaan masing-masing yang nantinya dapat dilihat pada area penyuntingan.


2.2.2.      Area Penyuntingan
Bagian ini dapat dikatakan sebagai bagian utama dalam pembuatan presentasi. Dibantu dengan Aloha Editor, pengguna dapat memasukkan konten presentasi yang diinginkan. Layout dari area penyuntingan ini dapat dimanipulasi dengan fungsi-fungsi yang ada pada panel aksi.
2.2.3.      Area Navigasi
Bagian ini adalah bagian dimana pengguna dapat melakukan navigasi pada area penyuntingan, seperti berpindah maju ke slide berikut atau mundur ke slide sebelumnya. Ada dua macam cara untuk dapat melakukan navigasi, yaitu dengan melakukan klik pada area navigasi atau dengan menggunakan keyboard. Untuk navigasi dengan menggunakan keyboard, beberapa tombol yang dapat dipakai adalah sebagai berikut: (1) Next slide: dapat diakses dengan menggunakan tombol spasi, tombol page down, tombol anak panah kanan, atau tombol anak panah bawah pada keyboard. (2) Previous slide: dapat diakses dengan menggunakan tombol anak panah kiri, tombol page up, tombol backspace, atau tombol anak panah atas yang ada di keyboard.
2.3.Halaman Unduh
Dari halaman pembuatan presentasi, pengguna akan diarahkan ke halaman ini untuk dapat mengunduh berkas presentasi yang telah dibuat sebelumnya dalam bentuk berkas HTML. Gambar 8 adalah tampilan dari halaman unduh. Proses pengunduhan diatur supaya setelah 5 detik, kotak dialog untuk mengunduh berkas akan muncul dan pengguna dapat mulai menentukan lokasi penyimpanan berkas presentasinya. Apabila ada suatu permasalahan sehingga kotak dialog untuk mengunduh berkas tidak muncul dalam waktu 5 detik, maka pengguna dapat melakukan request kembali dengan melakukan klik pada tombol unduh yang juga disediakan di halaman tersebut.
Gambar Halaman unduh pada Slides5
3.      Perancang Bangun Aplikasi Mobile pada Platform Android berbasis HTML5 Studi Kasus Layanan Informasi Website UNIPDU Jombang, Oleh Mita Septiana Chumairoh, Budiman, dan Diema HernykaSatyareni.

Menjelaskan bahwa penggunaan teknologi hybrid application dapat digunakan untuk mengambangkan website Unipdu Jombang ke arah mobile android yang dilengkapi dengan notifikasi (pemberitahuan). Mahasiswa dapat dengan mudah mendapatkan informasi dari website

HASIL PENELITIAN DAN PEMBAHASAN

Perancangan Sistem
Perancangan sistem yang akan dibangun mengadopsi dari Hybrid Application yang saat ini merupakan hal baru dalam dunia teknologi. Hybrid Application sangat cocok digunakan untuk mengembangkan layanan yang ada di website Unipdu Jombang. Gambar di bawah ini menunjukkan gambaran umum dari aplikasi yang dibangun.

 
Gambar 2. Gambaran Umum sistem yang akan dibangun 

Perangkat lunak pada server yaitu web server yang ditangani oleh script PHP dan database MySQL dengan sistem  hosting  internet. Aplikasi  di  sisi  server berfungsi  untuk  menangani  koneksi  client  yang berbasis platform android.

Setiap inputan dari calon mahasiswa baru dan admin fakultas akan  ditangani  dan  dilayani  oleh  web  server. Perangkat  lunak  pada  client  dibuat menggunakan  platform  android. Aplikasi  ini  akan dipasang  di handphone  client yang berfungsi untuk menerima notifikasi layanan informasi website Unipdu Jombang. Gambar 3 di bawah ini menerangkan perancangan sistem. 







  Gambar 3. Alur Sistem yang akan dibangun

Perancangan Database Karena dikembangkan dari sistem yang sudah ada, maka terdapat beberapa tabel yang diambil dari sistem sebelumnya. Gambar di bawah adalah hasil gabungan dari perancangan database sistem yang diusulkan. Tabel dengan tanda warna biru adalah tabel dari sistem yang diusulkan.
Gambar 4. Perancangan Database  

Perancangan Interface Berikut adalah tampilan menu dari aplikasi mobile yang akad dibangun. Terdapat sembilan menu utama seperti tampak pada gambar di bawah ini. 
Gambar 5. Perancangan Interface 

Implementasi Antatmuka Implementasi  antarmuka  sistem  merupakan implementasi hasil dari desain yang  telah dirancang sebelumnya.  Berikut adalah  implementasi  antarmuka aplikasi mobile system informasi website unipdu yang dilengkapi dengan fitur notifikasi  

Gambar 6. Halaman pendaftaran online

4.     KESIMPULAN
Dari berbagai macam kegunaan HTML5 seperti yang sudah di review diatas, dapat disimpulkan bahwa HTML5 memiliki potensial yang besar dalam menyederhanakan suatu proses kegiatan manusia dengan menggunakan apliakasi berbasis web, mempermudah pembuatan presentasi serta membuatnya terlihat semakin menarik dengan menggunakan layanan dari salah satu fitur HTML5 yaitu Slide5 untuk menyelesaikan masalah kompatibilitas, dan juga penggunaan HTML5 untuk mempermudah pengaksesan suatu informasi dengan menggunakan aplikasi mobile ber-platfrom Android.  Dengan mengetahui informasi diatas penulis berharap pembaca dapat mengetahui lebih banyak mengenai HTML5 dan pembaca dapat mengembangkan potensi yang dimiliki HTML5 sehingga di masa yang akan datang perkembangan teknologi akan dapat membuat kehidupan manusia menjadi jauh lebih mudah.














DAFTAR PUSTAKA
·         Jurnal Pembuatan Aplikasi Tampilan Utama  Dalam Sistem Antrian Layanan Nasabah Di Bank  Berbasis Web Dengan Memanfaatkan Html 5.
Oleh Hendra Dinata dan Lisana Universitas Surabaya hdinata@ubaya.ac.id dan lisana@ubaya.ac.id

·         Jurnal Rancang Bangun Aplikasi Pembuatan Presentasi Berbasis Web Menggunakan HTML5.
Oleh Prima Astiadi1, Oesman Hendra Kelana2 1,2Program Studi Teknik Informatika, Universitas Ma Chung Jl.
Villa Puncak Tidar N-01, Malang 65151 Email: primaastiadi@gmail.com

·         Jurnal Perancang Bangun Aplikasi Mobile Pada  Platform Android Berbasis Html5 Studi Kasus Layanan Informasi Website Unipdu Jombang.
Oleh Mita Septiana Chumairoh, Budiman, Diema Hernyka Satyareni. Universitas Pesantren Tinggi Darul Ulum Jombang, Indonesia.
http://webcache.googleusercontent.com/search?q=cache:Ib3KBtp8TU8J:journal.trunojoyo.ac.id/edutic/article/viewFile/402/375+&cd=10&hl=en&ct=clnk&gl=id

Tidak ada komentar:

Posting Komentar