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.
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.
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.
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.
·
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.
·
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
