T1 672009276 Full text

(1)

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

(2)

(3)

(4)

(5)

(6)

(7)

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

(8)

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

(9)

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

(10)

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.

(11)

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.

(12)

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.

(13)

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.

(14)

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();

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)

(15)

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 FormMember 1. protected function validator(array $data)

2. {

3. return Validator::make($data, [ 4. 'name' => 'required|max:255',

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

(16)

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

(17)

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">

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>

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">

(18)

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}}),

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

(19)

12

Tabel 1 Hasil Pengujian Blackbox

No Module yang diuji Data input / Kondisi Hasil yang

username, password dan alamat

email. Email belum pernah

terdaftar.

Ada input username, password

dan alamat email dan email

alamat, nomor, longitude,

latitude.

Memilih tombol delete Data yang dipilih

berhasil dihapus.

Memilih tombol delete Data berhasil

dihapus

Data berhasil

dihapus

(20)

13

9 Tampilan aplikasi

pada perangkat

dengan lebar 320 px.

Menyesuaikan tampilan firefox dengan lebar 320 px.

pada perangkat

Menyesuaikan tampilan firefox dengan lebar 768 px.

pada perangkat

Menyesuaikan tampilan firefox dengan lebar 1024 px. 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.

(21)

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.