21
Aplikasi Kuliner Salatiga Berbasis Web Menggunakan Framework Laravel Artikel Ilmiah Peneliti: Edify Wicaksono (672009276) Evangs Mailoa, S.Kom., M.Cs. Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga September 2016

Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

  • Upload
    hathien

  • View
    235

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

Aplikasi Kuliner Salatiga Berbasis Web

Menggunakan Framework Laravel

Artikel Ilmiah

Peneliti:

Edify Wicaksono (672009276)

Evangs Mailoa, S.Kom., M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

September 2016

Page 2: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan
Page 3: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan
Page 4: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan
Page 5: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan
Page 6: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan
Page 7: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

Aplikasi Kuliner Salatiga Berbasis Web

Menggunakan Framework Laravel

1)Edify Wicaksono, 2)Evangs Mailoa

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

Email: 1)[email protected], 2)[email protected]

Abstract

During this time cullinary information still obtained from limited sources, usually from family

and friends. Information that we obtained usually less complete, so we need an application

that serve cullinary information like: kinds of foods, price and location. This research create web-based application that facilitates traders to promote their foods and make it easier for

food lovers to search infortmation about food. Application made using laravel framework

and google maps API. The result from this research is web-based application that can be used by traders and food lovers.

Keywords : Cullinary, Application, Web, Web Portal, Laravel.

Abstrak

Selama ini informasi kuliner yang diperoleh masih terbatas sumbernya, biasanya dari keluarga

dan teman. Informasi yang diperolehpun kurang lengkap, sehingga dibutuhkan sebuah

aplikasi yang dapat menyajikan informasi kuliner seperti : jenis makanan, harga, dan lokasi

penjual. Pada penelitian ini dibuat sebuah aplikasi berbasis web yang memudahkan pedagang

untuk mempromosikan makanannya dan memudahkan para pecinta makanan untuk mencari

informasi tentang makanan. Pembuatan aplikasi ini menggunakan framework Laravel dan

memanfaatkan google maps API. Hasil yang diperoleh dari penelitian ini adalah sebuah

aplikasi berbasis web yang dapat memfasilitasi antara pedagang dan pecinta makanan .

Kata Kunci : Kuliner, Aplikasi, Web, Web Portal, Laravel.

1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen Satya Wacana

Salatiga 2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga

Page 8: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

1

1. Pendahuluan

Kota Salatiga merupakan kota yang disebut miniatur Indonesia, hal ini

dikarenakan banyaknya pelajar yang datang dari berbagai penjuru di Indonesia

untuk melanjutkan pendidikan di kota Salatiga. Terkadang banyak di antara

pelajar memilih untuk menetap di Salatiga ketika masa pendidikan mereka

berakhir. Banyaknya pelajar perantau yang ada di Salatiga membuat sebagian

orang berinisiatif untuk membuka warung makan yang menjual makanan khas

daerah. Semakin banyak makanan khas daerah yang dijual di Salatiga

mengakibatkan bertambah kayanya keanekaragaman kuliner yang ada di Salatiga

[1].

Selama ini informasi kuliner yang diperoleh masih terbatas sumbernya,

biasanya dari keluarga dan teman [2]. Informasi yang diperolehpun kurang

lengkap, sehingga dibutuhkan sebuah aplikasi yang dapat menyajikan informasi

kuliner seperti: jenis makanan, harga, lokasi penjual dan deskripsi tentang

makanan tersebut.

Masalah tersebut dapat diatasi dengan membuat aplikasi berbasis web

pada berbagai perangkat mobile maupun desktop. Aplikasi ini dikembangkan

menggunakan framework Laravel dan framework Bootstrap sebagai framework

HTML/CSS. Penggunaan framework laravel memudahkan dalam membangun

aplikasi berbasis PHP karena proses registrasi dan autentikasi menjadi lebih

mudah. Laravel 5.0 juga memiliki sebuah template engine bawaan yaitu blade

yang memudahkan dalam pembuatan sebuah layout.

Pada penelitian ini dirancang Aplikasi Kuliner Salatiga Berbasis Web

Menggunakan Framework Laravel. Sistem yang dibuat pada penelitian ini

menggunakan framework Laravel dan Bootstrap serta memanfaatkan blade engine

sebagai template engine bawaan Laravel. Sistem yang dibuat dapat menampilkan

informasi seputar restoran yang ada di Salatiga, fasilitas yang disediakan, menu

makanan. Selain itu juga dilengkapi penilaian terhadap menu dan kualitas restoran

yang dapat dilakukan oleh pengunjung situs.

Berdasarkan latar belakang tersebut, maka dilakukan penelitian yang

berjudul aplikasi kuliner Salatiga berbasis web menggunakan framework Laravel.

2. Tinjauan Pustaka

Penelitian berjudul Aplikasi Portal Informasi Kuliner di Surabaya Berbasis

Website telah membahas pembuatan portal dengan menggunakan bahasa

pemrograman PHP dan database MySQL. Penelitian ini muncul akibat kurangnya

informasi tentang restoran yang ada di Surabaya beserta lokasinya. Hasil dari

penelitian ini berupa sebuah web portal yang memungkinkan pemilik restoran

untuk mempromosikan restorannya. Manfaat dari penelitian ini adalah

mempermudah para penikmat makanan menemukan lokasi restoran yang ada di

Surabaya dengan memanfaatkan google maps dan memberikan informasi seputar

makanan dan fasilitas yang disediakan oleh restoran [3]. Penelitian ini dan

penelitian terdahulu mempunyai kesamaan permasalahan yang dihadapi, yaitu

kurangnya informasi tentang kuliner yang ada. Penyelesaian permasalahannya pun

Page 9: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

2

memiliki kemiripan yaitu membuat sebuah aplikasi yang berbasis web. Berbeda

dengan penelitian sebelumnya pada penelitian ini akan menyisipkan suatu

fiturebaru bagi pemilik restoran yaitu kemampuan untuk mengganti template

halaman web yang dikelola dengan beberapa template yang telah disediakan

sehingga sesuai dengan karakteristik restoran yang ingin ditonjolkan.

Penelitian yang berjudul Aplikasi Inventory Toko Haji Padlan Nur

Berbasis Smarty PHP Object Oriented Programming Engine untuk pembuatan

pencatatan transaksi di toko haji Padlan Nur. Penelitian ini muncul akibat belum

adanya sistem inventory yang baik pada toko haji Padlan Nur karena masih

dilakukan secara manual sehingga memungkinkan banyak terjadi kesalahan.

Penyelesaian permasalahan ini adalah membuat sebuah aplikasi berbasis PHP

dengan menggunakan Smarty sebagai template engine. Penggunaan Smarty

memudahkan dalam memisahkan pengkodingan logika dan layout pada

pembuatan aplikasi berbasis web. Pemanfaatan Smarty sebagai template engine

mempermudah dalam pengembangan template [4]. Meskipun penelitian

sebelumnya mempunyai permasalahan yang berbeda dengan penelitian ini tetapi

konsep tentang penggunaan template engine dalam penyelesaian permasalahannya

menjadi dasar dalam pengembangan aplikasi kuliner Salatiga. Berbeda dengan

penelitian sebelumnya, pada penelitian ini akan digunakan blade, sebagai template

engine bawaan dari Laravel.

Laravel adalah framework untuk aplikasi web dengan sintaks yang

ekspresif dan elegan. Laravel didesain untuk pengembangan aplikasi web dengan

PHP. Laravel memudahkan dalam membuat modul-modul dalam kode sehingga

terlihat lebih rapi sehingga mudah untuk dibaca dan dipahami. Laravel membantu

untuk membangun sebuah proyek web dengan mempermudah programmer dalam

melakukan otentikasi, routing, session dan chaching. Laravel merupakan sebuah

software yang open source di bawah lisensi MIT [5].

Gambar 1 Blade Template Engine [5].

Page 10: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

3

Gambar 1 menunjukkan cara kerja dari blade. Blade merupakan template

engine bawaan dari laravel. Blade engine akan mengkompilasi kode-kode khas

blade ke dalam bahasa PHP tetapi blade tidak membatasi penggunaan bahasa

PHP biasa dalam tampilan blade. Penggunaan blade memudahkan untuk

menggunakan ulang bagian-bagian dari template yang dibuat pada halaman

lainnya. Penggunaan blade memungkinkan untuk mengkombinasikan beberapa

template ke dalam satu halaman HTML [6].

Bootstrap adalah framework HTML, CSS dan Javascript untuk

mengembangkan situs web yang responsif mulai dari ponsel, tablet, hingga

desktop. Penggunaan Bootstrap membuat pengembangan web dari sisi tampilan

menjadi lebih mudah dan lebih cepat [7]. Google Maps API adalah sejumlah

methods dan tools yang digunakan dalam pengembangan aplikasi untuk

menampilkan peta Google [8]. Pada penelitian ini, Bootstrap digunakan untuk

membuat tampilan aplikasi lebih interaktif dan Google Maps API untuk

menunjukkan lokasi restoran.

3. Methode dan Perancangan Sistem

Penelitian yang dilakukan, disesuaikan dalam tahapan penelitian, yang

terbagi dalam beberapa tahap, seperti ditunjukkan pada gambar 2.

Gambar 2 Tahapan Penelitian

Page 11: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

4

Tahapan penelitian pada gambar 2 dijelaskan sebagai berikut. Tahapan

pertama adalah pengumpulan data atau user requirement dari sistem yang akan

dibuat. Versi framework Laravel yang digunakan adalah versi 5.0. Versi

Bootstrap yang digunakan adalah versi 4.0. Analisis kebutuhan dilakukan melalui

observasi dan wawancara terhadap 30 pemilik restoran yang ada di Salatiga.

Wawancara digunakan untuk mengetahui fitur apa yang diingkinkan dalam

sebuah aplikasi kuliner dan perangkat yang sering digunakan dalam mengakses

internet. Berdasarkan hasil wawancara dapat disimpulkan bahwa pemilik restoran

menginginkan sebuah aplikasi yang mudah untuk diakses melalui smartphone,

memiliki akses mengelola data menu, dapat menampilkan lokasi restoran dan

dapat menampilkan testimoni dari pelanggan. Tahapan kedua adalah perancangan

sistem berdasarkan hasil analisis kebutuhan menggunakan UML (Unified

Modelling Language) yang terdiri dari use case diagram dan class diagram. Pada

tahapan ini juga dirancang database dan antarmuka aplikasi yang akan dibuat.

Tahapan ketiga adalah implementasi sistem. Implementasi kode program

menggunakan notepad ++ sebagai development tools dan percobaan simulasi

aplikasi menggunakan wamp. Tahap keempat adalah pengujian sistem serta

analisis hasil pengujian. Metode yang digunakan untuk pengujian adalah metode

black box untuk menguji fungsionalitas aplikasi yang dibuat. Tahapan kelima

adalah penulisan laporan hasil penelitian, yaitu dilakukan dokumentasi proses dari

tahap awal sampai tahap akhir dalam bentuk tulisan ilmiah.

Pada tahap perancangan sistem, perancangan proses dilakukan

menggunakan UML (Unified Modelling Language) yang berfungsi

menggambarkan prosedur dan proses kerja dari aplikasi yang dirancang. Use case

diagram adalah gambaran dari beberapa atau seluruh actor, use case, dan interaksi

antara komponen tersebut yang menampilkan bagaimana sistem akan dibangun

[9]. Use case diagram pada aplikasi ini terdapat 3 aktor yaitu admin, member dan

viewer.

Gambar 3 Use Case Diagram

Page 12: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

5

Use case diagram pada Gambar 3 menunjukkan bahwa admin memiliki

wewenang untuk menghapus data member dari website. Status member didapat

ketika viewer sudah melakukan registrasi sehingga memiliki unique id. Setiap

member dapat mengatur data restoran mereka. Setiap member memiliki

wewenang untuk mengatur data makanan dan restoran yang dimiliki. Viewer

dapat mencari restoran, mencari menu makanan, dan memberikan testimoni

terhadap layanan sebuah restoran.

Gambar 4 Class Diagram Sistem

Gambar 4 menunjukkan class diagram yang berisi tentang struktur antar

tabel dan hubungannya yang terjadi. Sistem ini memiliki 4 class, yaitu: member,

food, resto dan testimoni. Class member memiliki controller yaitu

manage_data_member_con dan memiliki method insert, update dan delete serta

memiliki boundary data_member_UI. Class food memiliki controller yaitu

manage_food_con dan memiliki method insert, update, delete dan view serta

memiliki boundary manage_food_UI. Class resto memiliki controller yaitu

manage_data_resto_con dan memiliki method insert, update dan delete serta

memiliki boundary data_resto_UI. Class testimoni memiliki controller yaitu

manage_testimoni_con dan memiliki method insert dan delete serta memiliki

boundary manage_testimoni_UI.

4. Hasil dan Pembahasan

Hasil dan pembahasan meliputi tentang pembuatan dan sistem. Pada

sistem ini terhadap 3 hak akses yaitu viewer, member dan admin.

Viewer hanya dapat melihat daftar makanan, mencari makanan dan restoran serta

memberikan testimoni. Member memiliki hak untuk mengelola data restoran,

data makanan dan menghapus testimoni yang dirasa tidak sesuai. Sedangkan

Page 13: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

6

admin berhak untuk menghapus member yang tidak sesuai serta menambahkan

member baru.

Gambar 5 Halaman utama

Gambar 5 merupakan tampilan halaman utama dari website salatiga

kuliner. Halaman ini berisi daftar makanan dan daftar restoran.

Gambar 6 Halaman Pencarian Menu

Page 14: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

7

Gambar 6 merupakan tampilan dari pencarian menu makanan oleh viewer.

Menu akan ditampilkan sesuai dengan input yang dilakukan.

Kode Program 1 Fungsi Search pada Halaman Utama

1. public function search_food(Request $request) {

2. $post=$request->all();

3. $data1=DB::table('food')-

>where('name','like','%'.$post['food'].'%')>orderBy('id','desc')-

>paginate(12);

4. return view('search-food')->with('data1',$data1);

5. }

Kode Program 1 merupakan fungsi pencarian makanan pada halaman

utama. Viewer memasukkan data yang akan diproses dan dicari kesesuaiannya

dalam database. Data tersebut akan ditampilkan di halaman pencarian.

Penjelasan tentang kode-kode dalam fungsi pencarian makanan adalah

sebagai berikut. Kode baris nomor 1 merupakan nama fungsi, yaitu search_food.

Kode baris nomor 2 menjelaskan tentang pengambilan data dari input viewer dan

menyimpannya dalam variabel post. Kode baris nomor 3 merupakan pengambilan

data dari database dan menyimpannya kedalam variable data1. Kode baris nomor

4 merupakan hasil kembalian dari fungsi search_food, yaitu pengalihan ke

halaman search-food.blade.php beserta dengan data hasil pencarian.

Gambar 7 Tampilan Halaman Registrasi

Gambar 7 adalah halaman registrasi. Halaman ini berfungsi bagi para

viewers yang ingin menjadi member dari salatigakuliner.com. Keuntungan

menjadi member dari salatigakuliner.com adalah member dapat mengelola sendiri

restorannya dengan beberapa pilihan layout yang menarik.

Kode Program 2 Fungsi Register

1. public function register(Request $request)

2. {

3. $validator = $this->validator($request->all());

4. if ($validator->fails()){

5. $this->throwValidationException(

6. $request, $validator);}

7. Auth::guard($this->getGuard())->login($this->create($request-

>all()));

8. return redirect($this->redirectPath());

9. }

Page 15: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

8

Kode Program 2 merupakan fungsi dari registrasi member baru. Data yang

masukkan ke dalam form akan divalidasi terlebih dahulu. Apabila data valid akan

diteruskan ke dalam database, sebaliknya apabila data tidak valid akan

dikembalikan ke form registrasi. Kode Program 3 Fungsi Validasi pada Form Member

1. protected function validator(array $data)

2. {

3. return Validator::make($data, [

4. 'name' => 'required|max:255',

5. 'email' => 'required|email|max:255|unique:users',

6. 'password' => 'required|confirmed|min:6',

7. ]);

8. }

Kode program 3 merupakan fungsi validasi dari form registrasi, fungsi ini

berfungsi untuk menyaring data sehingga sesuai dengan input yang diinginkan.

Kode Program 4 Fungsi Simpan Data Member 1. protected function create(array $data)

2. {

3. return User::create([

4. 'name' => $data['name'],

5. 'email' => $data['email'],

6. 'password' => bcrypt($data['password']),

7. ]);

8. }

Kode program 4 merupakan fungsi untuk menyimpan data dari form

registrasi ke dalam database.

Gambar 8 Tampilan Halaman Kelola Data Resto

Gambar 8 adalah halaman untuk mengelola data resto. Data ini akan

memudahkan untuk mengidentifikasi restoran tersebut seperti: logo, alamat,

nomor telpon, posisi dan layout yang dipilih.

Page 16: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

9

Gambar 9 Tampilan Halaman Kelola Data Makanan

Gambar 9 merupakan tampilan dari kelola data makanan. Menu tambah

data ke katalog dan dapat untuk merubah data, juga menghapus data makanan dari

katalog.

Gambar 10 Tampilan Halaman Utama Member A dan Member B

Gambar 10 menjelaskan tentang perbedaan layout dari member. Member

dimungkinkan untuk mengganti tampilan halamannya dengan beberapa pilihan

layout yang disediakan sehingga sesuai dengan karakteristik restoran yang

dimilikinya. Pada prototype ini disediakan dua buah layout.

Kode Program 5 Fungsi Menampilkan Halaman Member 1. public function index($name_resto){

2. $id_resto=DB::table('resto')->where('name',$name_resto)->value('id');

3. $id_layouts=DB::table('resto')->where('id',$id_resto)->value('id_layout');

4. $layout=DB::table('layout')->where('id',$id_layouts)->value('name_layout');

5. $data1=DB::table('food')->where('id_resto',$id_resto)->take('5')-

>orderBy('id','desc')->get();

6. $data2=DB::table('resto')->where('name',$name_resto)->take('5')

>orderBy('id','desc')->get();

7. $data3=DB::table('banners')->where('id_resto',$id_resto)-

>orderBy('id_banners','desc')->get();

8. return view($layout)->with('data1',$data1)->with('data2',$data2)-

>with('data3',$data3);

9. }

Kode program 5 menjelaskan tentang cara menampilkan halaman pada

masing-masing member, setiap member memiliki tampilan layout sesuai dengan

pilihannya. Layout pilihan member yang tersimpan di database akan diambil

datanya kemudian ditampilkan.

Page 17: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

10

Kode Program 6 Potongan Kode pada Halaman branch-layout.blade.php 1. <div class="navbar-header">

2. <button type="button" class="navbar-toggle collapsed" data-

toggle="collapse" data-target="#app-navbar-collapse">

3. <span class="sr-only">Toggle Navigation</span>

4. <span class="icon-bar"></span>

5. <span class="icon-bar"></span>

6. <span class="icon-bar"></span>

7. </button>

8. <img class="img" src="{{url('images/logo/salatiga1.png')}}"><a

href="{{url('/food')}}" class="navbar-brand"></a></img>

9. </div>

10. <div class="collapse navbar-collapse" id="app-navbar-collapse"> 11. <ul class="nav navbar-nav navbar-right btn-primary"> 12. <li><a href="/profile/{{Request::segment(2)}}">Home</a></li> 13. <li><a href="/profile/{{Request::segment(2)}}/food">Food</a></li> 14. <li><a

href="/profile/{{Request::segment(2)}}/contact">Contact</a></li>

15. </ul> 16. </div> 17. </div> 18. </nav> 19. </div class="container"> 20. @yield('branch') 21. <footer> 22. <div class="navbar white"> 23. <h4 class="text-center">@copyright Salatiga Kuliner 2016</h4> 24. </div> 25. </footer>

Kode program 6 merupakan sebuah sebuah layout yang terdiri dari header

dan footer dan sebuah content dinamis. Salah satu penggunaan dari blade ada

pada baris kode nomor 20. Baris kode tersebut menunjukkan bahwa branch-

layout.blade.php dapat memuat sebuah section yang bernama branch. Kode

program 7 akan menjelaskan cara pendefinisan dari section dan pemanggilan

sebuah layout.

Kode Program 7 Kode pada Halaman branch-food-blade.php 1. @extends('layouts.branch-layout')

2. @section('branch')

3. <div class="container">

4. <div class="col-md-12">

5. <div class="panel">

6. <div class="panel-heading panel-title text-center gray">Food</div>

7. <div class="panel-body">

8. @foreach($data as $row)

9. <div class="col-md-4">

10. <div class="thumbnail"> 11. p class="text-center titles">{{$row->name}}</p> 12. <img src= "../../images/foods/{{$row->picture}}"></img> 13. <p class="text-center">{{$row->price}}</p> 14. </div> 15. </div> 16. @endforeach 17. </div> 18. <div class="panel-footer"> 19. {{$data->render()}} 20. </div> 21. </div> 22. </div> 23. </div> 24. @endsection

Kode program 7 menunjukkan pendefinisian sebuah section dan

pemanggilan dari sebuah layout. Pada kode baris 1 menunjukkan bahwa halaman

Page 18: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

11

ini merujuk kepada branch-layout.blade.php yang terletak pada folder layouts.

Pada kode baris 2 merupakan pendefinisian sebuah section yang bernama branch.

Kode Program 8 Kode untuk Menampilkan Google Maps

1. <script>

2. function initialize() {

3. @foreach($data as $row)

4. var mapProp = { center:new google.maps.LatLng({{$row-

>longitude}},{{$row->latitude}}),

5. zoom:15,

6. scrollwheel: false,

7. mapTypeControl: false,

8. draggable: false,

9. mapTypeId:google.maps.MapTypeId.ROADMAP

10. }; 11. @endforeach 12. Var map=new

google.maps.Map(document.getElementById("googleMap"),mapProp);

13. } 14. google.maps.event.addDomListener(window, 'load', initialize); 15. </script>

Kode program 8 menunjukkan kode javascript proses menampilkan google

maps. Kode baris nomor 4 menunjukkan longitude dan latitude yang diperoleh

dari database yang merupakan koordinat yang nenunjukkan lokasi restoran.

Kode baris nomor 12 menunjukkan bahwa google maps akan ditampilkan pada

HTML yang memiliki id googleMap.

Gambar 11 Tampilan Aplikasi pada Beberapa Perangkat.

Gambar 11 menjelaskan tentang tampilan aplikasi pada berbagai

perangkat. Penggunaan bootstrap memudahkan dalam membangun aplikasi yang

interaktif karena boostrap sudah menyediakan empat class grid system, yaitu xs

(phones), sm (tablets), md (desktops), lg (large desktops).

Pengujian sistem dilakukan dengan teknik pengujian alfa. Pengujian alfa

adalah pengujian yang dilakukan di sisi pengembang yaitu programmer terhadap

aplikasi yang dibuat sebelum diserahkan kepada pengguna. Pengujian pada tahap

ini menggunakan metode blackbox yang merupakan pengujian fungsionalitas

tanpa memperhatikan alur eksekusi program melainkan apakah setiap fungsi pada

sistem berjalan dengan semestinya. Hasil pengujian sistem ditunjukkan pada

Tabel 1.

Page 19: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

12

Tabel 1 Hasil Pengujian Blackbox

No Module yang diuji Data input / Kondisi Hasil yang

diharapkan

Hasil Uji Status

1 Pencarian menu

makanan

Bagian nama dari menu

makanan

Daftar menu

yang sesuai atau

memiliki kemiripan dengan

input.

Daftar menu

berhasil

ditampilkan

Valid

2 Registrasi member baru

Ada input username, password dan alamat

email. Email belum pernah

terdaftar.

Ada input username, password dan alamat email dan email

sudah terdaftar.

Registrasi berhasil.

Registrasi gagal

Registrasi berhasil.

Registrasi gagal

Valid

Valid

3 Insert data

restoran.

Ada input nama restoran,

alamat, nomor telpon, posisi

longitude dan latitude.

Data berhasil

masuk ke dalam

database dan berhasil

ditampilkan oleh

aplikasi.

Data berhasil

masuk ke dalam

database dan berhasil

ditampilkan oleh

aplikasi.

Valid

4

Update data restoran

Ada input nama restoran, alamat, nomor, longitude,

latitude.

Data berhasil masuk ke dalam

database dan

berhasil ditampilkan oleh

aplikasi.

Data berhasil masuk ke dalam

database dan

berhasil di tampilkan oleh

aplikasi.

Valid

5

Delete data

restoran

Memilih tombol delete

Data yang dipilih

berhasil dihapus.

Data yang dipilih

berhasil dihapus.

Valid

6

Insert data rmakanan.

Ada input nama makanan, harga, dan gambar

Data berhasil masuk ke dalam

database dan

berhasil ditampilkan oleh

aplikasi.

Data berhasil masuk ke dalam

database dan

berhasil ditampilkan oleh

aplikasi.

Valid

7 Update data

makanan.

Ada input nama makanan,

harga, dan gambar

Data berhasil

dirubah ke dalam

database dan berhasil

ditampilkan oleh

aplikasi.

Data berhasil

dirubah ke dalam

database dan berhasil

ditampilkan oleh

aplikasi.

Valid

8 Delete data

makanan

Memilih tombol delete Data berhasil

dihapus

Data berhasil

dihapus

Valid

Page 20: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

13

9 Tampilan aplikasi

pada perangkat dengan lebar

320 px.

Menyesuaikan tampilan firefox

dengan lebar 320 px.

Aplikasi dapat

ditampilkan dengan baik.

Aplikasi dapat

ditampilkan dengan baik.

Valid

10 Tampilan aplikasi

pada perangkat dengan lebar

768 px.

Menyesuaikan tampilan firefox

dengan lebar 768 px.

Aplikasi dapat

ditampilkan dengan baik.

Aplikasi dapat

ditampilkan dengan baik.

Valid

11 Tampilan aplikasi pada perangkat

dengan lebar

1024 px.

Menyesuaikan tampilan firefox dengan lebar 1024 px.

Aplikasi dapat ditampilkan

dengan baik.

Aplikasi dapat ditampilkan

dengan baik.

Valid

Berdasarkan hasil pengujian alfa pada Tabel 1, didapatkan hasil bahwa

sistem berjalan tanpa masalah dan sudah memenuhi kebutuhan sistem.

5. Simpulan

Berdasarkan penelitian, pembahasan dan pengujian yang dilakukan, maka

dapat disimpulkan bahwa aplikasi kuliner Salatiga dapat membantu pedagang

dalam memasarkan makanannya. Selain itu, aplikasi ini dapat mempermudah

pecinta makanan dalam mencari dan menemukan informasi seputar makanan dan

lokasi penjualnya. Penggunaan framework laravel membantu dalam

pengembangan aplikasi ini dan penggunaan blade yang merupakan template

engine bawaan dari laravel memudahkan dalam pengaturan layout.

6. Pustaka

[1]. Saputra, Imam Yudha. 2016. Icip-icip ala mahasiswa UKSW.

http://www.semarangpos.com/2016/4/21/agenda-salatiga-icip-icip-ala-

mahasiswa-uksw-712452 (diakses tanggal 17 juli 2016).

[2]. Alamsyah, Yuyun. 2008. Bangkitnya Bisnis Kuliner Tradisional : Meraih

Untung dari Bisnis Masakan Tradisional Kaki Lima sampai Restoran.

Jakarta, Elex Media Komputindo.

[3]. Florencia, Handojo, dan Yulia. 2013.Aplikasi Portal Informasi Kuliner di

Surabaya Berbasis Website. Jurnal INFRA Vol 1 No 1.

http://studentjournal.petra.ac.id/index.php/teknik-

informatika/article/views/159 (diakses tanggal 17 Juli 2016 ).

[4]. Supriadi, Dedi dan Sumarno. 2013. Aplikasi Inventory Toko Haji Padlan

Nur Berbasis SMARTY PHP Object Oriented Programming Engine.

http://www.academia.edu/16569185/Aplikasi_Inventory_Toko_Haji_Padl

an_Nur_Berbasis_Smarty_Php_Object_Oriented_Programing_Engine

(diakses tanggal 17 Juli 2016).

[5]. Aminudin. 2015. Cara Efektif Belajar Framework Laravel. Yogyakarta:

CV.Lokomedia.

[6]. Surguy, Maks. Laravel:My First Framework.

http://www.maxoffsky.com/code-blog/laravel-first-framework-chapter-4-

views/ (diakses tanggal 17 Juli 2016 ).

Page 21: Aplikasi Kuliner Salatiga Berbasis Web Menggunakan …repository.uksw.edu/bitstream/123456789/11228/2/T1_672009276_Full... · informasi tentang makanan. Pembuatan aplikasi ini menggunakan

14

[7]. Widyantoro, Wahyu.2013.Bootstrap. Yogyakarta: CV.Lokomedia

[8]. Google Maps API Tutorial.

http://www.w3schools.com/googleAPI/default.asp (diakses tanggal 17 juli

2016).

[9]. Christine. 2014. Mengenal Use Case Diagram.

http://www.academia.edu/5295802/Mengenal_Use_Case_Diagram (diakses

tanggal 17 Juli 2016).