-
5
Perancangan Responsive Web untuk Pemesanan Menu Makanan
dan Minuman menggunakan Twitter Bootstrap
(Studi Kasus: Restoran Laras Hati Magelang)
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti:
Tommy Wira Winata (672010187)
Ramos Somya, S.Kom., M.Cs
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Desember 2014
-
1
-
2
-
3
-
4
-
5
Perancangan Responsive Web untuk Pemesanan Menu Makanan
dan Minuman menggunakan Twitter Bootstrap
(Studi Kasus: Restoran Laras Hati Magelang)
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti:
Tommy Wira Winata (672010187)
Ramos Somya, S.Kom., M.Cs
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Desember 2014
-
6
Perancangan Responsive Web untuk Pemesanan Menu Makanan
dan Minuman menggunakan Twitter Bootstrap
(Studi Kasus: Restoran Laras Hati Magelang)
1)Tommy Wira Winata,
2) Ramos Somya
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50771, Indonesia Email:
1) [email protected],
2) [email protected]
Abstract
Information technology is used in many business nowadays, but
Laras Hati
Restaurant doesn’t process use any IT programs in their
business. The problem
occurs on the ordering process of the restaurant. The restaurant
uses phone call and
text messages to take order from customers. As a result,
customers have to wait since
there is only one telephone connection available. The use of
text messaging is not
effective as well. This research was made to make web as media
to order food and
drink in Laras Hati Restaurant Magelang. The web IT made based
on the responsive
web uses Twitter Bootstrap. The result gives empirical prove
that this responsive web
can be used as an alternative to order food and beverages in
Laras Hati Restaurant
Magelang.
Keywords: Responsive Web, Twitter Bootstrap
Abstrak
Teknologi Informasi digunakan manfaatnya dalam bidang usaha
yaitu untuk jual beli
online. Namun, restoran Laras Hati Magelang belum menggunakan
Teknologi
Informasi dalam kegiatan bisnisnya. Masalah yang muncul adalah
pada kegiatan
pesan antar makanan dan minuman yang dipesan oleh pelanggan.
Restoran ini
menggunakan telepon dan SMS untuk melayani pesanan yang masuk.
Akibatnya
terjadi antrian yang lama karena sambungan telepon hanya satu.
Penggunaan SMS
juga dirasa tidak efektif. Melalui penelitian ini dibuat web
sebagai media untuk
memesan makanan dan minuman di Laras Hati Magelang. Web ini
dibuat berbasis
responsive web menggunakan Twitter Bootstrap. Hasil yang
diperoleh adalah
responsive web ini dapat dijadikan sebagai media alternatif
dalam pemesanan menu
makanan dan minuman di Restoran Laras Hati Magelang.
Kata Kunci: Responsive Web, Twitter Bootstrap 1) Mahasiswa
Fakultas Teknologi Informasi Jurusan Teknik Informatika,
Universitas Kristen Satya Wacana Salatiga. 2) Staff Pengajar
Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana
Salatiga.
mailto:[email protected]:[email protected]
-
7
1. Pendahuluan Teknologi Informasi saat ini digunakan dalam
berbagai aspek kehidupan
manusia, salah satunya adalah dalam dunia usaha atau bisnis.
Teknologi Informasi
digunakan tidak hanya oleh bidang usaha besar tetapi juga sudah
digunakan untuk
usaha skala kecil dan menengah. Contoh penggunaannya adalah
dalam proses jual
beli online yang tidak hanya digunakan untuk bidang usaha besar
tetapi banyak juga
digunakan oleh bidang usaha skala kecil dan menengah.
Pada dunia kuliner juga dimanfaatkan Teknologi Informasi
dalam
mendukung kegiatan bisnisnya. Saat ini dapat dijumpai restoran
maupun rumah
makan yang sudah menggunakan TI untuk memudahkan pelanggan
dalam
melakukan pemesanan menu makanan dan minuman. Selain itu,
Teknologi Informasi
juga digunakan untuk melakukan manajemen data di restoran,
misalnya digunakan
untuk proses pembayaran, pencatatan bahan baku, pencatatan
pendapatan dan lain-
lain.
Restoran Laras Hati Magelang merupakan restoran yang berada di
jalan
Tentara Pelajar Magelang. Dilihat dari adanya peningkatan dalam
penghasilan bersih
dalam setiap bulannya, maka dapat disimpulkan bahwa restoran ini
setiap harinya
ramai dengan pengunjung. Restoran ini juga menyediakan layanan
pesan dan antar
makanan dan minuman kepada pembeli melalui telepon atau SMS
untuk melakukan
pemesanan menu makanan dan minuman yang kemudian akan diantar ke
alamat
pembeli.
Pemesanan yang dilakukan oleh pembeli ini sering kali
menimbulkan
masalah, karena hanya ada satu sambungan telepon. Pembeli harus
menunggu untuk
melakukan pemesanan via telepon jika sambungan telepon sedang
digunakan.
Pembeli masih bisa melakukan pemesanan via SMS, namun setelah
mengirimkan
SMS yang berisi pemesanan makanan dan minuman sering kali menu
yang dipesan
sudah habis. Dengan pemesanan menggunakan telepon dan SMS,
pembeli tidak bisa
mengetahui ketersediaan menu makanan dan minuman.
Berdasarkan masalah yang sudah dijelaskan, pada penelitian ini
akan
dirancang aplikasi untuk melakukan pemesanan menu makanan dan
minuman secara
online. Aplikasi yang dirancang adalah aplikasi berbasis web
yang menerapkan
responsive web. Responsive web ini digunakan karena dalam
mengakses web ini
nanti tidak hanya bisa dilakukan lewat browser komputer saja,
tetapi web juga bisa
diakses menggunakan perangkat lain misalnya tablet maupun
telepon seluler dengan
tampilan yang menyesuaikan dengan layar device. Diharapkan
dengan menggunakan
responsive web akan membuat halaman web yang sesuai dengan
kebutuhan Restoran
Laras Hati Magelang.
Pada penelitian ini, untuk membuat aplikasi pemesanan menu
makanan dan
minuman berbasis responsive web digunakan Twitter Bootstrap.
Twitter Bootstrap
sendiri merupakan framework yang biasa digunakan untuk membuat
aplikasi web
ataupun situs web responsive secara cepat, mudah dan gratis.
Twitter Bootstrap ini
terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout,
Typography, Table,
Form, Navigation dan lain-lain. Selain itu, di dalam Twitter
Bootstrap juga sudah
terdapat jQuery plugins untuk menghasilkan komponen User
Interface yang cantik
seperti Transitions, Modal, Dropdown, Scrollspy, Tooltip, Tab,
Alert dan lain-lain.
-
8
Rumusan masalah dalam penelitian ini adalah bagaimana
merancang
responsive web untuk pemesanan menu makanan dan minuman di
restoran Laras
Hati Magelang menggunakan Twitter Bootstrap. Tujuan penelitian
yang akan dicapai
adalah merancang responsive web untuk pemesanan menu makanan dan
minuman
menggunakan Twitter Bootstrap di restoran Laras Hati Magelang.
Manfaat atau
kontribusi penelitian yang diharapkan adalah menyediakan
alternative pemesanan
menu makanan dan minuman di restoran Laras Hati Magelang dan
dapat mengetahui
bagaimana penggunaan Twitter Bootstrap untuk membuat sebuah web
menjadi
responsive. Penelitian ini memiliki beberapa batasan masalah,
yaitu: untuk
responsive web diterapkan pada halaman-halaman web untuk hak
akses pelanggan,
tidak membahas pembayaran secara online dan tidak membahas
tentang keamanan
data dalam basis data.
2. Kajian Pustaka Penelitian yang akan dilakukan ini mengacu
pada 2 (dua) penelitian
terdahulu. Penelitian terdahulu yang pertama berjudul
Perancangan Sistem Informasi
Online Shopping Bandung Book Centre Berbasis Responsive Web
dibahas tentang
perancangan e-commerce untuk penjualan buku secara online dengan
responsive
web. Penelitian ini menggunakan metode Prototype dalam metode
pengembangan
sistemnya. Dengan pembuatan sistem informasi ini bisa membantu
Bandung Book
Center memasarkan produk mereka, pelanggan dapat mengakses
website dengan
menggunakan browser pada PC/Laptop maupun menggunakan smartphone
[1].
Pada penelitian terdahulu yang kedua dengan judul Web Responsive
Design
Untuk Situs Berita Menggunakan Framework CodeIgniter, dibahas
tentang
pembuatan web responsive dengan menggunakan HTML5 dan CSS3 yang
diterapkan
pada framework CodeIgniter. Hasil dari penelitian ini adalah
terbentuknya sebuah
web responsive design untuk situs berita yang berguna
mempermudah membaca
konten berita dan meningkatkan kenyamanan [2].
Perbedaan penelitian ini dengan penelitian terdahulu adalah pada
penelitian
ini tidak menggunakan framework dalam pembuatan aplikasinya,
tetapi
menggunakan bahasa pemrograman PHP 5. Responsive web pada
penelitian ini
menggunakan library Twitter Bootstrap, berbeda dengan penelitian
terdahulu yang
kedua di mana pada penelitian tersebut menggunakan HTML5 dan
CSS3.
Web adalah suatu metode untuk menampilan informasi di internet,
baik
berupa teks, gambar, suara maupun video yang interaktif dan
mempunyai kelebihan
untuk menghubungkan (link) satu dokumen dengan dokumen lainnya
(hypertext)
yang dapat diakses melalui sebuah browser. Secara umum situs web
mempunyai
beberapa fungsi, yaitu fungsi komunikasi, fungsi informasi,
fungsi hiburan dan
fungsi transaksi [3].
Istilah Responsive Web Design sendiri pertama kali diperkenalkan
oleh Ethan
Marcotte dalam bukunya yang berjudul “Responsive Web Design”.
Dibahas
mengenai 3 teknik yang digunakan dalam membangun sebuah
Responsive Web
Design, yaitu: flexible grid layout, flexible images dan media
queries. Flexible grid
yaitu sebuah konsep ukuran elemen halaman dengan pilihan satuan
persen daripada
satuan absolut seperti pixel atau point, flexible images yaitu
sebuah teknik mencegah
agar media gambar, video, object, tidak melewati batas dari
elemen container, media
-
9
queries merupakan modul CSS3 memungkinkan render konten untuk
beradaptasi
dengan kondisi seperti resolusi. Sebuah media queries terdiri
dari jenis media dan 1
atau lebih ekspresi. Hasil dari media queries dinyatakan benar,
jika perangkat dalam
media queries sesuai maka, stylesheet yang sesuai akan
diterapkan [4].
Web Responsive Design (RWD) pada dasarnya menunjukkan bahwa
situs web
dibuat menggunakan W3C CSS3 media dengan cairan proporsi
berbasis grid, untuk
beradaptasi tata letak dengan melihat lingkungan platform dan
gambar fleksibel
sebagai hasilnya, pengguna di berbagai platform dan browser akan
memiliki akses ke
satu sumber konten, ditata sehingga mudah dibaca dan navigasi
dengan minimal
mengubah ukuran, panning dan scrolling. Web responsive design
pertama kali
diperkenalkan oleh Ethan Marcotte pada artikelnya yang sangat
inspiratif Web
Responsive 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 [2].
Twitter Bootstrap sendiri merupakan library yang biasa digunakan
untuk
membuat aplikasi web ataupun situs web responsive secara cepat,
mudah dan gratis.
Twitter Bootstrap ini terdiri dari CSS dan HTML untuk
menghasilkan Grid, Layout,
Typography, Table, Form, Navigation dan lain-lain. Selain itu,
di dalam Twitter
Bootstrap juga sudah terdapat jQuery plugins untuk menghasilkan
komponen User
Interface yang cantik seperti Transitions, Modal, Dropdown,
Scrollspy, Tooltip, Tab,
Alert dan lain-lain [5].
AJAX pertama kali diperkenalkan oleh Rasmus Lerdorf. AJAX
merupakan
singkatan dari Asynchronous JavaScript and XML yang dibuat dari
serangkaian
teknologi dengan berbagai kemampuan yaitu JavaScript, XML dan
sebuah method
komunikasi asinkron antara client dan server tanpa harus
menunggu respon dari
server untuk mendeskripsikan proses dari penggunaan objek
XMLHttpRequest untuk
mendapatkan informasi dari web server dengan cara dinamis.
Untuk
mengaplikasikan AJAX dalam website, dibutuhkan browser yang
menyediakan
layanan Javascript, dan komponen XMLHTTP bagi pengguna Internet
Explorer (IE),
dan XMLHttpRequest untuk Firefox, Safary, Opera dan browser
lainnya [6]. Pada
aplikasi yang dibuat ini, AJAX digunakan pada halaman history
pesanan pelanggan
dan pada halaman daftar pesanan di bagian administrator. Pada
halaman history
pesanan, pelanggan dapat mengetahui status pesanan yang telah
dilakukaan tanpa
perlu melakukan refresh pada browser. Sedangkan pada halaman
daftar pesanan,
administrator dapat melihat daftar pesanan yang masuk secara
realtime tanpa harus
melalukan refresh halaman. Jika ada pesanan baru yang masuk,
data akan langsung
dapat ditampilkan pada browser.
3. Tahapan Penelitian Pada penelitian ini, akan dilakukan
beberapa tahapan penelitian yang secara
garis besar terbagi ke dalam lima tahapan, yaitu : 1) Analisis
kebutuhan dan
pengumpulan data yang diperlukan. 2) Perancangan Sistem. 3)
Perancangan
aplikasi/program. 4) Implementasi dan pengujian sistem, serta
analisis hasil
-
10
pengujian. 5) Penulisan laporan hasil penelitian.
Tahapan-tahapan yang dilakukan
dalam penelitian ini dapat dilihat pada Gambar 1.
Gambar 1 Tahapan Penelitian
Berdasarkan bagan pada Gambar 1 dapat dijelaskan bahwa tahapan
penelitian
yang dilakukan adalah sebagai berikut: 1) Tahap pertama:
analisis dan pengumpulan
data, di mana pihak developer mencari tahu kebutuhan client
dalam pembuatan
aplikasi. Pengumpulan data yang dilakukan dalam penelitian ini
dilakukan dengan
cara wawancara. 2) Tahap kedua: perancangan sistem meliputi
perancangan proses
menggunakan UML seperti usecase diagram, activity diagram,
sequence diagram,
class diagram, dan deployment diagram. 3) Tahap ketiga:
perancangan aplikasi atau
program yaitu merancang aplikasi sesuai dengan kebutuhan dari
client yang telah
diperoleh dari pengumpulan data yang dilakukan. 4) Tahap
keempat: implementasi
dan pengujian sistem, serta analisis hasil pengujian. Pada
tahapan ini dilakukan
proses pembangunan sistem atau aplikasi berdasarkan rancangan
yang telah dibuat.
Kemudian dilakukan pengujian untuk mengetahui apakah aplikasi
yang dibangun
sudah sesuai atau tidak. Akhir dari tahapan ini adalah melakukan
analisis pengujian
sistem. 5) Tahap kelima: penulisan laporan hasil penelitian,
yaitu
mendokumentasikan setiap proses yang dilakukan di dalam
penelitian yang telah
dilakukan dalam bentuk laporan tertulis dan akan menjadi laporan
hasil penelitian
dalam bentuk artikel ilmiah.
Pada tahap pertama dilakukan analisis kebutuhan dan pengumpulan
data.
analisis kebutuhan didapatkan setelah melakukan identifikasi
masalah yang terjadi di
restoran Laras Hati berkaitan dengan proses pemesanan menu
makanan dan
minuman untuk layanan pesan antar. Layanan pesan antar dilakukan
melalui 2 (dua)
cara, yaitu melaui sambungan telepon dan SMS. Pelanggan dapat
memesan makanan
dan minuman melalui telepon, namun hanya tersedia sebuah
sambungan telepon,
sehingga antrian yang terjadi untuk melayani pelanggan menjadi
lama. Pemesanan
melalui SMS juga bisa dilakukan tetapi kadang terhambat jika SMS
tidak
masuk/pending dan menu yang dipesan ternyata sudah habis tidak
bisa diketahui oleh
pelanggan. Adapun proses bisnis layanan pesan antar ini adalah
sebagai berikut: 1)
pelanggan memesan makanan dan minuman melalui sambungan telepon
atau SMS,
2) karyawan restoran mencatat pesanan pelanggan, 3) pesanan akan
dibuat/dimasak,
4) pesanan diantar ke alamat pelanggan, dan 4) pelanggan
melakukan pembayaran
saat pesanan tiba.
-
11
Pada tahapan perancangan sistem dan perangkat lunak untuk
menggambarkan
prosedur dan proses kerja dari sistem aplikasi yang dibangun.
Proses perancangan
sistem dalam penelitian ini menggunakan UML (Unified Modeling
Language)
dengan beberapa proses yang akan dijelaskan sebagai berikut.
pesan menu
registrasiguest
edit profil lihat menu
lihat cart
pelanggan
lihat history
tambah menu
edit menu
hapus menu
lihat kategori
manage menu
manage kategori
edit ketegori
hapus kategori
manage pelanggan
lihat pelanggan
tambah kategori
tambah pelanggan
edit pelanggan
hapus pelanggan
administrator
lihat pesanan
memproses pesanan
extends
extends
extends
extends
extends extends
extends
extends
extends
extends
extends
extends
extends
extends
Gambar 2 Diagram Use Case Aplikasi
Gambar 2 merupakan diagram use case dari aplikasi yang dibuat.
Terdapat 3
(tiga) aktor dalam aplikasi, yaitu aktor guest, pelanggan dan
administrator. Aktor
guest hanya dapat melakukan proses lihat menu dan melakukan
registrasi. Aktor
pelanggan dapat melakukan proses lihat menu, melakukan pemesanan
menu, melihat
shopping cart atau keranjang belanja, edit profil dan melihat
history pemesanan.
Aktor administrator merupakan aktor dengan hak akses paling
tinggi, di mana dapat
melakukan pengelolaan data menu, kategori, pelanggan dan
melakukan pemrosesan
pemesanan.
mulai
selesai
login
melihat menu
menampilkan daftar
menu
login gagal
login sukses
cek user
memproses
data menu
basis dataaplikasi webpelanggan
Gambar 3 Diagram Activity Lihat Daftar Menu
Gambar 3 merupakan diagram activity untuk proses melihat daftar
menu yang
dilakukan oleh pelanggan. Proses diawali dengan melakukan login
ke dalam aplikasi.
Data login akan diperiksa dalam basis data. Jika belum terdaftar
sebagai pelanggan,
maka halaman akan dialihkan kembali ke halaman login dan akan
ada keterangan
-
12
bahwa login gagal. Jika login sukses maka pelanggan dapat
melihat daftar menu
yang akan diambil dari basis data.
mulai
selesai
login
melihat menu
menampilkan daftar
menu
login gagal
login sukses
memesan menu
melihat shopping
cart
cek user
memproses
data menu
simpan
pesanan
basis dataaplikasi webpelanggan
Gambar 4 Diagram Activity Proses Pesan Menu
Gambar 4 merupakan diagram activity untuk proses pemesanan menu
oleh
pelanggan. Pelanggan harus melakukan login sebelum memesan menu.
Jika login
sukses, maka pelanggan dapat melihat dan memilih menu makanan
maupun
minuman untuk dipesan. Menu yang dipesan akan disimpan dalam
basis data dan
dapat dilihat kembali pada halaman shopping cart.
: pelangganmenuUI menuController menu
1: buka halaman menu2: memanggil fungsi menu
3: meminta data menu
4: menyiapkan data menu
5: mengirim data menu
6: menampilkan daftar menu
Gambar 5 Diagram Sequence Proses Lihat Daftar Menu
Gambar 5 merupakan diagram sequence untuk proses melihat daftar
menu
yang dilakukan oleh pelanggan. Pelanggan membuka halaman daftar
menu, aplikasi
akan memanggil fungsi lihat menu pada bagian menuController.
Pada fungsi lihat
menu terdapat perintah untuk melakukan select data menu dari
tabel menu dalam
-
13
n
n
1
basis data. basis data akan mengirimkan data menu hasil select
data, kemudian akan
ditampilkan pada halaman menu untuk dilihat oleh pelanggan.
: pelangganmenuUI menuController menu transaksiController
transaksi cartUI
1: buka halaman menu
6: menampilkan daftar menu
2: memanggil fungsi menu
3: meminta data menu
4: menyiapkan data menu
5: mengirim data menu
7: memilih menu
8: mengirim data pesanan
9: mengirim data pesanan
10: simpan data pesanan
12: menampilkan shopping cart
11: kirim data
13: selesai
Gambar 6 Diagram Sequence Proses Pemesanan
Gambar 6 merupakan diagram sequence untuk proses pemesanan.
Pertama
kali pelanggan dapat memilih halaman menu untuk melihat semua
daftar menu
makanan dan minuman yang disediakan. Pelanggan dapat memesan
dengan memilih
salah satu menu yang tersedia, pilihan ini akan disimpan dalam
tabel transaksi dalam
basis data. setiap menu yang dipesan pelanggan kemudian akan
ditampilkan dalam
halaman shopping cart.
Gambar 7 Diagram Class Bagian Entity Aplikasi
-
14
Gambar 7 merupakan diagram class yang menggambarkan entity class
pada
aplikasi. Entity class ini merupakan representasi tabel dalam
basis data, di mana
terdapat 4 (empat) tabel yaitu kategori, menu, transaksi dan
user. Keempat entity
class tersebut di dalam aplikasi disebut sebagai bagian model.
Bagian model ini
merupakan bagian yang terdapat class-class yang berfungsi untuk
melakukan
berbagai macam pemrosesan data dalam basis data.
4. Hasil Implementasi dan Pembahasan Aplikasi web yang dibuat
pada penelitian ini menggunakan library Twitter
Bootstrap untuk menciptakan web yang bersifat responsive.
Library ini dapat
diunduh secara gratis di alamat
http://twitter.github.io/bootstrap/. Terdapat 3 (tiga)
buah folder dalam library yang disediakan seperti terlihat pada
Gambar 8.
Gambar 8 Library Twitter Bootstrap
Library Twitter Bootstrap terdiri dari 3 (tiga) buah komponen
utama untuk
menciptakan halaman web yang responsive. Komponen itu adalah
css, img dan js.
Folder css berisi daftar CSS (Cascading Style Sheet) untuk
memformat tampilan web.
Folder img berisi file gambar untuk mendukung tampilan
responsive web, sedangkan
folder js berisi JavaScript untuk menangani fungsi-fungsi yang
berkaitan antara css
dan img tersebut.
Gambar 9 Tampilan Awal Web pada Laptop
Gambar 9 merupakan tampilan awal web yang telah dibuat pada
browser
yang dibuka melalui laptop. Terlihat 4 (empat) link yang
disediakan, yaitu link
Makanan untuk melihat daftar menu makanan, link minuman untuk
melihat daftar
menu minuman, link Log In untuk melakukan login ke dalam web dan
link Register
http://twitter.github.io/bootstrap/
-
15
untuk melakukan registrasi atau pendaftaran sebagai pelanggan
restoran. Untuk dapat
memesan menu makanan dan minuman, pelanggan harus melalukan
registrasi
terlebih dahulu dan menunggu sampai account tersebut diaktifkan
oleh bagian
administrator restoran. Setelah account aktif, pelanggan dapat
memesan menu.
Aplikasi web yang dibuat bersifat responsive, sehingga dapat
diakses juga
melalui berbagai media tanpa merusak halaman web. Gambar 10
merupakan
tampilan web ketika dibuka melalui browser pada perangkat
mobile.
Gambar 10 Tampilan Web pada Browser Perangkat Mobile
Pengaktifkan fitur responsive web menggunakan Twitter
Bootstrap,
menggunakan perintah pada Kode Program 1.
Kode Program 1 Perintah Mengaktifkan Fitur Responsive
Penambahan tag , maka
sekarang web yang dibuat telah mempunyai fitur responsive.
Penanganan fitur
responsive pada bagian menu digunakan fitur Responsive
Navigation Bar yang sudah
disediakan oleh library Twitter Bootstrap.
1. 2. Restoran Laras Hati 3. 4. 5. 6.
-
16
Gambar 11 Tampilan Responsive Navigation Bar
Pada Gambar 11 menampilkan tampilan awal pembeli yang akan
memilih
menu makanan, dimana terdapat responsive navigation bar yang
akan menampilkan
seluruh menu makanan dan minuman yang tersedia pada Restoran
Laras Hati
Magelang.
Kode Program 2 Perintah untuk Membuat Responsive Navigation
Bar
Tombol trigger pada Gambar 11 dibuat dengan memanggil perintah .
Tag in memanggil selection class CSS pada Twitter Bootstrap
untuk
menciptakan tombol trigger tersebut. Baris 9 sampai 19 pada Kode
Program 2
digunakan untuk membuat komponen navigation bar.
1. 2. 3.
4. 5. 6. 7. 8. 9.
10. 11. 12. 13. Makanan
14. 15. 16.
-
17
Gambar 12 Tampilan Form Login
Twitter Bootstrap juga menyediakan fitur untuk membuat komponen
form
pada halaman web menjadi bersifat responsive seperti terlihat
pada Gambar 12. Kode
Program 3 merupakan perintah untuk menciptakan form responsive
ini yaitu dengan
memanggil tag .
Kode Program 3 Perintah Responsive Form
Pada proses bisnis web pemesanan menu ini, pelanggan dapat
memesan menu
setelah melakukan login. Pemesanan dapat dilakukan pada halaman
menu yang
menampilkan daftar menu berdasarkan kategori.
Gambar 13 Tampilan Daftar Menu
Pelanggan dapat memesan menu yang diinginkan dengan memilih link
Pesan.
Menu tersebut kemudian akan dimasukkan ke dalam keranjang
belanja atau shopping
cart pada Gambar 13. Tampilan halaman shopping cart ditunjukkan
pada Gambar 14
berikut ini.
1. 2. 3. Username 4. 5. 6. 7.
-
18
Gambar 14 Tampilan Halaman Shopping Cart
Pelanggan dapat melihat daftar menu yang dipesan seperti
terlihat pada
Gambar 14. Pelanggan juga dapat menghapus menu yang tidak jadi
dipesan dan
dapat melanjutkan memesan menu lainnya dengan memilih link
Lanjut Belanja.
Status pemesanan menu yang dipesan oleh pelanggan ini pertama
kali adalah tunggu.
Sehingga harus mengunggu konfirmasi dari bagian administrator
restoran. Status
semua riwayat pemesanan ditampilkan pada Gambar 15.
Gambar 15 Halaman History Status Pemesanan
Kode Program 4 Perintah view halaman history
1. function loadXMLDoc() 2. { 3. var xmlhttp; 4. if
(window.XMLHttpRequest){ 5. // code for IE7+, Firefox, Chrome,
Opera, Safari 6. xmlhttp=new XMLHttpRequest(); 7. }else{ 8. // code
for IE6, IE5 9. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 10.
} 11. 12. xmlhttp.onreadystatechange=function() 13. { 14. if
(xmlhttp.readyState==4 && xmlhttp.status==200){ 15.
document.getElementById("history_belanja"). 16.
innerHTML=xmlhttp.responseText; 17. } 18. } 19.
xmlhttp.open("GET","history_belanja.php",true); 20. xmlhttp.send();
21. }
-
19
Kode Program 4 merupakan perintah untuk mengetahui status
pemesanan
oleh pelanggan tanpa melakukan refresh pada browser.
Administrator restoran
kemudian akan memproses pesanan tersebut pada halaman daftar
pesanan. Halaman
ini ditunjukkan pada Gambar 16.
Gambar 16 Halaman Daftar Pesanan
Pada halaman daftar pesanan, administrator restoran dapat
melihat daftar
antrian pesanan dari pelanggan. Adminstrator dapat memproses
pesanan tersebut
berdasarkan antrian. Untuk melihat menu apa saja yang dipesan,
administrator dapat
memilih link Detail. Detail pesanan pelanggan ditunjukkan pada
Gambar 17.
Gambar 17 Halaman Detail Pesanan
Tersedia 3 (tiga) status pesanan dalam web ini, yaitu tunggu,
proses dan
selesai. Status pertama adalah tunggu. Jika pesanan sudah
diproses untuk dimasak,
maka status diubah menjadi proses. Dan jika pesanan sudah
diantarkan ke alamat
pelanggan, maka status akan diubah menjadi selesai.
Pengujian aplikasi dilakukan dengan menguji fungsi-fungsi dari
aplikasi yang
telah dibuat untuk mencari kesalahan/bug pada sistem. Pengujian
aplikasi dilakukan
agar sistem yang dibuat berjalan sesuai dengan yang diharapkan
dan dapat memenuhi
kebutuhan pengguna. Pengujian aplikasi ini menggunakan pengujian
end user
computing dan beta. End-User Computing adalah pemanfaatan
komputer oleh
pemakai. Pemakai akhir fungsional melakukan aktivitas
pemprosesan informasinya
dengan perangkat keras (hardware) , perangkat lunak (software),
dan sumber daya
professional yang terdapat dalam organisasi. Pemakai akhir (end
user) yang
dimaksud disini adalah admin dan pembeli Restoran Laras Hati
Magelang.
-
20
Berdasarkan pengujian yang dilakukan pada aplikasi web dapat
dilihat status
pengujian dari setiap fungsi valid, maka disimpulkan bahwa
aplikasi ini berjalan
dengan baik dan sesuai yang diharapkan. Pengujian beta adalah
pengujian yang
dilakukan oleh orang yang tidak ikut dalam pembuatan aplikasi
atau calon pengguna
aplikasi. Pengujian beta dilakukan dengan menggunakan
pertanyaan, yaitu dengan
membagikan pertanyaan kepada sample user. Sample user berjumlah
30 responden
dan dipilih secara acak, sample user pada pengujian ini adalah
orang yang sedang
makan di Retoran Laras Hati Magelang. Hasil wawancara dapat
dilihat pada Tabel 1.
Tabel 1 Hasil Jawaban Wawancara
Pernyataan STS TS CS S SS
Aplikasi aplikasi ini mudah digunakan 1 0 4 14 11
Tampilan, huruf dan gambar dari aplikasi ini dapat dilihat
dengan jelas
0 1 3 15 11
Menu-menu pada aplikasi ini mudah dipahami dan tidak
membingungkan
1 0 4 16 9
Aplikasi ini membantu dan mempermudah pelanggan untuk
memesan menu makanan dan minuman secara online
0 1 6 10 13
Aplikasi ini bermanfaat untuk digunakan oleh pelanggan
maupun non pelanggan
0 2 5 9 14
Setelah semua jawaban diketahui maka yang dilakukan adalah
menghitung
presentase jawaban responden dari pertanyaan yang telah
dibagikan. Perhitungan
dilakukan menggunakan skala Likert, di mana masing-masing
jawaban diberi skor 1-
5 dengan penjelasan sebagai berikut:
1. Sangat Tidak Setuju (STS) = 1 2. Tidak Setuju (TS) = 2 3.
Cukup Setuju (CS) = 3 4. Setuju (S) = 4 5. Sangat Setuju (SS) =
5
Hasil analisis data untuk pertanyaan 1 menunjukkan sebanyak
36,67%
responden menjawab sangat setuju, 46,67% responden menjawab
setuju dan 13,33%
responden menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi
ini mudah untuk
digunakan.
Hasil analisis data untuk pertanyaan 2 menunjukkan sebanyak
36,67%
responden menjawab sangat setuju, 50,00% responden menjawab
setuju dan 10,00%
responden menjawab cukup setuju. Jadi disimpulkan bahwa tampilan
aplikasi ini
dapat dilihat dengan jelas.
Hasil analisis data untuk pertanyaan 3 menunjukkan sebanyak
30,00%
responden menjawab sangat setuju, 53,33% responden menjawab
setuju dan 13,33%
responden menjawab cukup setuju. Jadi disimpulkan bahwa
menu-menu pada
aplikasi ini mudah dipahami dan tidak membingungkan.
Hasil analisis data untuk pertanyaan 4 menunjukkan sebanyak
43,33%
responden menjawab sangat setuju, 33,33% responden menjawab
setuju dan 20,00%
responden menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi
ini membantu
dan mempermudah pelanggan untuk memesan menu makanan dan minuman
secara
online.
Hasil analisis data untuk pertanyaan 5 menunjukkan sebanyak
46,67%
responden menjawab sangat setuju, 30,00% responden menjawab
setuju dan 16,67%
-
21
responden menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi
ini bermanfaat
untuk digunakan oleh pelanggan maupun non pelanggan.
5. Simpulan Berdasarkan penelitian yang telah dilakukan, maka
dapat diambil simpulan
bahwa responsive web dapat dibuat dengan menggunakan library
Twitter Bootstrap.
Twitter Bootstrap sudah menyediakan CSS yang dapat dipakai
langsung untuk
membentuk halaman web yang responsive. Aplikasi pemesanan menu
makanan dan
minuman ini juga bermanfaat bagi pelanggan maupun non pelanggan.
Pelanggan
dapat memesan tanpa harus menghubungi nomor telepon restoran.
Aplikasi ini dapat
digunakan sebagai salah satu alternatif untuk digunakan sebagai
media untuk
pemesanan menu di restoran Laras Hati Magelang.
6. Pustaka
[1] Hidayat, Firhat. 2014. Perancangan Sistem Informasi Online
Shopping Bandung Book Centre Berbasis Responsive Web. Bandung:
Jurnal Teknologi
dan Informasi UNIKOM.
[2] Herbowo, Agus Rahmat. 2012. Web Responsive Design Untuk
Situs Berita Menggunakan Framework CodeIginer. Jakarta: Jurusan
Sistem Informasi,
Fakultas Ilmu Komputer dan Teknologi Informasi Universitas
Gunadarma.
[3] Dewanto, I. Joko. 2006. Web Desain (Metode Aplikasi dan
Implementasi). Yogyakarta: Graha Ilmu.
[4] Marcotte, Ethan. 2011. Responsive Web Design,
http://ebookbrowsee.net. Diakses tanggal 8 Desember 2012.
[5] Alatas, Husein. 2013. Responsive Web Design dengan PHP &
Bootstrap. Yogyakarta: Loko Media.
[6] Susanto, Eko Heri. 2007. Membangun Aplikasi Web dengan AJAX.
Ilmu Komputer.