Institutional Repository | Satya Wacana Christian University: Perancangan Responsive Web untuk Pemesanan Menu Makanan dan Minuman menggunakan Twitter Bootstrap (Studi Kasus: Restoran Laras Hati Magelang)

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

5

1

2

3

4

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

5

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) tommyw.nata@gmail.com, 2) ramos.6005@gmail.com

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)
2)

Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen Satya Wacana Salatiga.
Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.

6

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

7

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

8

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

9

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

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.

extends
extends
extends
manage menu

tambah menu
guest

edit menu

registrasi
hapus menu

extends

extends

lihat kategori
edit profil

lihat menu

extendshapus kategori
manage kategori
extends

administrator
extends

manage pelanggan
pelanggan

edit ketegori

extends

extends

pesan menu

extends
lihat pesanan

tambah kategori

tambah pelanggan
extends
extends

extends
lihat pelanggan

lihat cart
lihat history
memproses pesanan

hapus pelanggan
edit pelanggan

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

mulai

aplikasi w eb

login

basis data

cek user

login gagal
login sukses
melihat menu

selesai

memproses
data menu

menampilkan daftar
menu

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
11

bahwa login gagal. Jika login sukses maka pelanggan dapat melihat daftar menu
yang akan diambil dari basis data.
pelanggan

aplikasi w eb

login

mulai

basis data

cek user

login gagal
login sukses
melihat menu

memproses
data menu

menampilkan daftar
menu

memesan menu

simpan
pesanan

melihat shopping
cart

selesai

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.

: pelanggan

menuUI

menuController

menu

1: buka halaman menu
2: 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

12

basis data. basis data akan mengirimkan data menu hasil select data, kemudian akan
ditampilkan pada halaman menu untuk dilihat oleh pelanggan.

: pelanggan

menuUI

menuController

menu

transaksiController

transaksi

cartUI

1: buka halaman menu
2: memanggil fungsi menu
3: meminta data menu
4: menyiapkan data menu
5: mengirim data menu
6: menampilkan daftar menu
7: memilih menu
8: mengirim data pesanan
9: mengirim data pesanan
10: simpan data pesanan
11: kirim data

12: menampilkan shopping cart
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.

1

n
n

Gambar 7 Diagram Class Bagian Entity Aplikasi

13

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

14

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
1.
2.
Restoran Laras Hati
3.

4.

5.

6.

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.

15

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
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.













Makanan