1
Perancangan Sistem Informasi Kuliner Di Kota Salatiga
Menggunakan
Framework
Laravel
Artikel Ilmiah
Diajukan kepada Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti :
Deva Januar Arifandi (672012229) Christine Dewi, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Juli 2018
6
1. Latar Belakang
Wisata kuliner saat ini menjadi sebuah jenis wisata yang sangat disukai oleh kalangan masyarakat pada umumnya. Selain untuk memenuhi kebutuhan pokok manusia jenis wisata ini sangat banyak dampaknya bagi perkembangan sebuah daerah. Wisata jenis ini sangat bergantung pada kreatifitas sumber daya manusia, sebab termasuk dalam kategori wisata yang bisa diciptakan dan tidak terlalu bergantung kepada sumber daya alam.
Saat ini, dengan makin banyaknya website yang sudah menerapkan teknologi
HTML5, maka muncullah konsep dan aplikasi berupa e-commerce, e-community dan
website yang mengutamakan teknologi multimedia lainnya, dengan tujuan untuk mempromosikan produk atau jasa secara lebih luas [1]. Akses informasi yang mudah melalui perangkat smartphone hingga laptop memberikan kemudahan kita untuk mencari berbagai macam kebutuhan kita dengan praktis.
Kota Salatiga dengan populasi penduduk mencapai 183.815 merupakan sebuah kota dengan aktifitas bisnis yang padat, mulai dari pertanian, transportasi, kebutuhan pokok hingga Kuliner. Selain itu Kota Salatiga merupakan kota yang ditempati oleh banyak pendatang dari berbagai macam kota di Indonesia, mulai dari pendatang yang bertujuan untuk menimba ilmu hingga orang lanjut usia yang ingin menikmati masa tuanya di Kota Salatiga. Hal ini mempengaruhi perkembangan produk kuliner yang ada, mulai dari masakan khas dari Indonesia barat hingga ke timur. Banyak berbagai macam produk Kuliner yang bisa kita temukan hampir di setiap sudut Kota Salatiga. Namun seringkali ketika membicarakan atau juga menunjukkan letak suatu lokasi kuliner atau rumah makan, keterangan yang kita dapatkan terkadang terbatas pada nama jalan dan arah atau ciri-ciri kawasannya saja. Sedangkan kejelasan dimana lokasi rumah makan tersebut berada tidak terpetakan secara baik. Selain itu informasi tentang nilai cita rasa dari makanan yang disajikan, bagaimana pelayanan yang diberikan dan informasi menu serta harga yang tersedia jarang bisa kita dapatkan [2]. Oleh karena itu agar informasi Kuliner di Kota Salatiga lebih mudah di didapatkan maka dirancang sebuah Sistem Informasi berbasis website
untuk memudahkan calon konsumen mendapatkan berbagai macam informasi
Kuliner, mulai dari harga, menu dan lokasi.
Manfaat yang dapat diperoleh dalam penelitian ini, diharapkan masyarakat dapat mengetahui informasi tentang harga, menu dan lokasi Rumah Makan di Kota Salatiga sehingga produk yang dipasarkan menjadi lebih efektif dan efisien dikenalkan ke calon konsumen. Kelebihan tersebut pada akhirnya nanti akan mampu memberikan nilai tambah selain bagi pemilik rumah makan untuk mempromosikan rumah makannya, juga akan memberikan nilai lebih terutama di sisi ekonomis bagi para pengunjung yang datang ke Salatiga atau juga masyarakat Salatiga sendiri untuk menentukan Rumah Makan yang ingin dikunjungi.
Perancangan Sistem Informasi Kuliner dilakukan dengan merancang suatu halaman website berbasis HTML5 dengan menggunakan framework Laravel sebagai kerangka website. Pemilihan penggunaan framework Laravel adalah karena selain
7
mudah dalam penggunaan, Laravel lebih mudah di modifikasi dan diintegrasikan dengan library ataupun framework lainnya. Laravel juga sudah mendukung Model View Controller (MVC). Sedangkan untuk mempermudah akses pengguna melalui
smartphone, website ini menggunakan Bootstrap dan Materialize framework CSS
yang nantinya berguna untuk membuat website menjadi lebih cepat dan responsif. Perancangan halaman website ini mengunakan bahasa Pemograman PHP dan Mysql supaya dikemudian hari bisa terus dikembangkan sesuai kebutuhan.
2. Tinjauan Pustaka
Pada penelitian terdahulu pernah mengangkat topik serupa dengan penelitian ini sehingga dijadikan sebagai bahan acuan keaslian dalam pelaksanaan penelitian ini.
Penelitian pertama membahas tentang Membangun Sistem Informasi Kuliner Bandung berbasis Web. Dalam penelitian ini dibangun sebuah website yang menampilkan berbagai macam informasi obyek wisata Kuliner di Kota Bandung.
Website kuliner ini dilengkapi dengan fasilitas pencarian obyek wisata kuliner, menampilkan berbagai macam menu yang tersedia di masing – masing tempat kuliner, dan terdapat fasilitas shoutbox untuk data testimonial bagi user yang ingin memasukan datanya. Website ini dibangun menggunakan Macromedia Dreamweaver 8 sebagai editor dan PHP sebagai bahasa pemrograman untuk membuat aplikasi [3].
Penelitian kedua membahas tentang Perancangan Sistem Informasi Wisata Kuliner Berbasis Web Dengan Menggunakan Ajax dan Code Igniter. Penelitian ini dibangun dengan metode Rekayasa Perangkat Lunak. Dalam penelitian ini dapat disimpulkan bahwa implementasi ajax dapat memudahkan interaksi user dan implementasi codeigniter memudahkan dalam pembuatan dan pengelolaan web [4].
Sistem adalah sekumpulan elemen yang saling terkait atau terpadu yang dimaksudkan untuk mencapai suatu tujuan [5]. Pada sistem perancangan yang dilakukan disini yang menjadi kumpulan elemennya merupakan kumpulan halamanhalaman website yang saling terkait menjadi suatu sistem yaitu website yang bertujuan untuk menyampaikan informasi yang telah diolah menjadi informasi berguna bagi penerimanya dan bermanfaat dalam pengambilan keputusan saat ini atau saat mendatang sehingga proses pemasaran dan penjualan produk secara luas ke berbagai daerah dapat dilakukan dengan mudah.
HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet.
HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Hingga kini, HTML5
masih dikembangkan dan sepertinya tidak akan pernah berhenti berkembang [6].
HTML5 saat ini sudah mendukung Asynchronous Javascript dan XML (Ajax) yang menjadi teknologi wajib diterapkan bagi website-website modern. Ajax membuat
8
aplikasi website menjadi lebih interaktif dan responsive serta memiliki kecepatan dalam memproses request ke server.
PHP merupakan singkatan dari “PHP: Hypertext Preprocessor”, adalah sebuah bahasa scripting yang terpasang pada HTML. Sebagian besar sintaks mirip dengan bahasa C, Java, asp dan Perl, ditambah beberapa fungsi PHP yang spesifik.Tujuan utama bahasa ini adalah untuk memungkinkan merancang website untuk menulis halaman web dinamik dengan cepat [8].
Framework dapat diartikan sebagai kumpulan potongan-potongan program (kelas dan fungsi) yang disusun dan di organisasikan sedemikian rupa, sehingga dapat digunakan kembali untuk membantu membuat aplikasi utuh tanpa harus membuat aplikasi utuh tanpa harus membuat semua kodenya dari awal. Laraveladalah sebuah framework PHP yang dirilis dibawah lisensi MIT, dibangun dengan konsep MVC (model view controller). Laravel adalah pengembangan website berbasis MVP yang ditulis dalam PHP yang dirancang untuk meningkatkan kualitas perangkat lunak dengan mengurangi biaya pengembangan awal dan biaya pemeliharaan, dan untuk meningkatkan pengalaman bekerja dengan aplikasi dengan menyediakan sintaks yang ekspresif, jelas dan menghemat waktu.
3. Metodologi Penelitian
Penelitian merupakan suatu proses mencari sesuatu secara sistimatis dalam waktu yang relatif lama dengan menggunakan metode ilmiah dengan prosedur maupun aturan yang berlaku. Penelitian terdiri atas beberapa tahapan yang saling terkait antara satu dengan yang lainnya [9]. Secara umum penelitian terbagi ke dalam 5 (lima) tahapan, yaitu: 1) Tahap indentifikasi masalah, 2) Tahap perancangan sistem, 3) Tahap pembuatan aplikasi, 4) Tahap implementasi dan pengujian system serta hasil pengujian, 5) Tahap pembuatan laporan dari hasil penelitian. Gambar 1 menunjukan alur tahapan penelitian[10].
Identifikasi masalah
Perancangan Sistem
Pembuatan Aplikasi
Implementasi dan pengujian sistem serta hasil pengujian
9
Gambar 1 Alur tahapan penelitian
Dalam tahapan penelitian ini adalah rancangan penelitian dengan merancang dan mengembangkan sistem dengan menggunakan metode prototype. Metode ini membuat pengembang dan pengguna dapat saling berinteraksi selama proses pembuatan sistem. Model prototyping menerapkan pengembangan yang cepat dan pengujian terhadap model kerja dari aplikasi baru melalui proses interaksi dan berulang-ulang. Prototyping disebut juga Rapid Application Design (RAD) karena menyederhanakan dan mempercepat desain sistem [11]. Model prototype adalah proses untuk membangun sebuah model sebuah sistem, berdasarkan pada kebutuhan
user yang tidak mengidentifikasikan secara jelas detail input, proses, ataupun output
[12]. Proses-proses dalam model prototyping ditunjukan pada Gambar 2.
Gambar 2 Tahapan Model Prototyping [13]
Tahap pertama pada metode prototyping ini adalah mengumpulkan kebutuhan pengguna yang digunakan selama proses pengembangan sistem. Pada tahap ini dilakukan pengumpulan kebutuhan informasi meliputi nama, koordinat (latitude dan
longitude), ulasan, alamat, nomor telepon, daftar produk dan harga. Sehingga diperoleh rumusan masalah yaitu bagaimana merancang aplikasi berbasis sistem informasi kuliner yang menyediakan informasi menu, harga dan lokasi kemudian mengimplementasikan sistem tersebut ke dalam website.
Tahap kedua pada metode prototyping ini adalah melakukan perancangan sistem untuk mewakili semua aspek sistem yang telah diketahui. Proses ini dilakukan dengan menerjemahkan kebutuhan sistem kedalam dokumen dengan menggunakan
Unified Modelling Language (UML). Use case diagram sistem yang digunakan pada penelitian ini dapat dilihat pada Gambar 3.
10
Gambar 3UseCaseDiagram Sistem
Pada Gambar 3 menggambarkan sistem memiliki dua pengguna yaitu
administrator dan user. Administrator memiliki kemampuan untuk manajemen data yang terdiri dari kelola menu, kelola harga dan kelola lokasi. Sedangkan client
memiliki kemampuan meliputi pencarian informasi produk, lihat informasi produk, dan pencarian informasi rumah makan. Proses pencarian informasi produk dapat dilakukan melalui pencarian dengan list menu dan melihat perbandingan harga. Selain itu informasi yang didapat dari proses pencarian rumah makan meliputi pencarian di daftar rumah makan dan melihat rute rumah makan terdekat.
11
Gambar 4 Activity Diagram Akses User
Gambar 4 Merupakan diagram activity untuk proses yang dilakukan oleh user dalam website. Ketika masuk kedalam home website terdapat pilihan rumah makan. Didalam menu home, user dapat melakukan register untuk mendapatkan
email kupon diskon. Ketika user memilih salah satu rumah makan, maka user dapat mengetahui informasi menu yang tersedia serta menu harga. Apabila user
menggunakan fitur get direction, maka website akan menampilkan navigasi dan rute melalui Google Maps.
12
Gambar 5 Activity Diagram Login Admin
Gambar 5 Merupakan diagram activity untuk admin di dalam website. Ketika masuk ke login admin, admin harus memasukan username dan password untuk dapat bisa masuk kedalam menu admin. Setelah login maka admin masuk kedalam halaman
home admin. Dalam halaman home admin terdapat menu edit dan delete dalam setiap kategori rumah makan. Menambah rumah makan admin akan masuk kedalam page
input data informasi rumah makan mulai dari nama rumah makan, harga menu, alamat rumah makan, deskripsi menu hingga lokasi rumah makan. Didalam proses tersebut database akan menambahkan data rumah makan baru proses selesai.
13
Gambar 6 Class Diagram Sistem
Gambar 6 Merupakan diagram class yang menunjukkan bahwa aplikasi ini terdiri dari 3 (tiga) bagian utama yaitu entity, controller, dan boundary. Entity
berhubungan langsung dengan data yang ada di dalam database, controller
berhubungan langsung dengan fungsi-fungsi pengelolaan data dan boundary
merupakan tampilan dari aplikasi. Pada aplikasi ini terdapat 2 (dua) Controller Class, yaitu Mengolah data toko Controller dan Mengolah data menu Controller.
14
4. Hasil dan Pembahasan
Sistem yang telah dibuat memiliki berbagai fitur yang berkaitan dengan sistem informasi Kuliner Kota Salatiga, mulai dari menampilkan detail informasi rumah makan, navigasi lokasi, kirim email dan download Pdf. Sistem informasi ini memiliki 2 pengguna. Pengguna pertama adalah admin yang memiliki hak akses untuk dapat melakukan CRUD.
Gambar 7 Halaman Depan Web view
Gambar 7 Merupakan tampilan halaman depan website ketika di akses melalui browser desktop. Pada halaman ini dapat di tampilkan keseluruhan dari konten yang ada di website. Sedangkan pada gambar 7 dan gambar 8 adalah tampilan dari mobile web view dan tablet web view untuk mengukur responsifitas dari penggunaan materialize framework css pada website kuliner salatiga.
15
Gambar 8Mobile Web View Gambar 9Tablet Web View
Gambar 8 dan Gambar 9 Merupakan tampilan dari mobile web view dan
tablet web view. Perbedaan yang didapatkan adalah pada gambar 8 tampilan menu menjadi 1 (satu) kolom dan pada gambar 9 tampilan menu menjadi skala half page
sehingga header pada gambar 8 dan gambar 9 berubah menjadi side navbar. Kode Program 1 Fungsi Grid Kolom
1. <div class=”col s12 m6”> 2. <div class=”card”>
3. <div class=”card-image”>
4. <img src=”{{ asset(‘image/’.$data->gambar_toko) }}”> 5. <span class=”card-title”>{{ $data->nama_toko }}</span> 6. <a class=”btn-floating halfway-fab waves-effect waves-light
red”>
7. <i class=”material-icons”>location_on</i></a></div> 8. <div class=”card-content”>
9. <p>
10. {!!substr($data->keterangan_toko,0,200)!!}…<br> 11. <a href=”{{” url(‘reads’, $data->id_toko}}”>Baca
Selebihnya</a> 12. </p>
13. </div> 14. </div> 15. </div>
Kode program 1 Merupakan fungsi untuk mengatur perubahan tampilan pada halaman depan website. Penggunaan “col s12 m6” berfungsi untuk mengatur
16
Perbandingan kolom yang ditampilkan dalam penggunaan kode tersebut adalah 12:6 = 2 kolom.
Gambar 10 Tampilan Email User Setelah Registrasi
Gambar 10 Merupakan tampilan email user setelah melakukan registrasi pada website Kuliner Salatiga. User akan mendapatkan email berisi kupon yang nantinya bisa dipergunakan untuk belanja di salah satu rumah makan tertentu.
Kode Program 2 Fungsi Mengirim Email
1. Route: :post(‘/registrasi’ , function() { 2. $email = Request::input(‘email’); 3. $registrasi = Request::input(‘nama’); 4. Mail::to($email)->send(new App\Mail\RegistrasiEmail($registrasi)); 5. Return view(‘login’); 6. });
Kode program 2 Merupakan fungsi untuk mengirimkan kupon ke email yang dan nama user yang dituju. Email akan dikirim secara otomatis setelah user
17
Gambar 11 Tampilan Cetak Menu Rumah Makan Berbentuk File.Pdf
Gambar 11 Merupakan tampilan menu dari rumah makan yang dipilih user
dengan mengklik button print menu pada kategori rumah makan. Kode program 3 Fungsi Cetak File.Pdf
1. public function getPdf(){ 2. $menu = Menu::all();
3. $pdf = PDF::loadView(‘menu.pdf’,compact(‘menu’))
4. -&gt;setPaper(‘a4’)-&gt;setOrientation(‘potrait’); 5. return $pdf-&gt;stream();
6. Route::get(‘/menu/pdf’,[
7. ‘uses’ = &gt; ‘MenuController@getPdf’, 8. ‘as’ = &gt; ‘menu.pdf’,]);
Kode program 3 Merupakan fungsi untuk mencetak pdf. Data yang ditampilkan pada pdf tersebut berasal dari tb_rumah_makan. Pada file tersebut berisi menu rumah makan yang dipilih user untuk di cetak. Setelah sistem dibangun maka dilakukan pengujian dengan metode black-box dengan hasil yang dapat dilihat pada table berikut
18
Berdasarkan pengujian yang dilakukan pada sistem website dapat dilihat status pengujian setiap fungsi valid, maka dapat disimpulkan bahwa sistem ini berjalan baik dan sesuai dengan yang diharapkan. Pengujian aplikasi ini hanya dilakukan dengan metode black-box.
5. Kesimpulan
Berdasarkan hasil penelitian yang telah dilakukan, maka dapat disimpulkan bahwa Sistem Informasi Kuliner di Kota Salatiga menggunakan Framework Laravel
yang dikembangkan dengan notifikasi email dan materialize dengan arsitektur MVC
(Model, View, Controller) sangat membantu dalam pembuatan sistem dengan Fungsi
yang diuji Kondisi
Output yang diharapkan Output yang dihasilkan sistem Kesimpulan Login Mengisi form Username dan Password dengan benar
Berhasil Login Sukses Login Valid
Input Data rumah makan
Form diisi dengan Benar Form diisi beberapa atau kosong Sukses tambah data Gagal tambah data Sukses tambah data Gagal tambah data Valid Ubah Data rumah makan
Form diisi dengan
benar Sukses ubah data Sukses ubah data Valid Hapus
Data rumah makan
Pilih salah satu Sukses hapus data Sukses hapus data Valid Register member Mengisi Username dan Password dengan Benar Sukses tambah data Sukses tambah data Valid Notifikasi Email Email terkirim setelah user melakukan registrasi Mendapatkan email setelah registrasi Mendapatkan email setelah registrasi Valid Klik tombol cetak menu Menampilkan form menu File dapat di unduh File dapat di unduh Valid Klik menu peta rumah makan Menampilkan rute rumah makan Sukses menampilkan rute Sukses menampilkan rute Valid
19
tampilan yang menarik dan responsif. Penggunaan dari Framework Laravel ini sangat membantu dalam pembangunan sistem karena dapat menghindari repetitive work (pekerjaan berulang-ulang) dengan berbagai macam fitur seperti schema builder, migration dan shading, query builder hingga eloquent ORM yang membuat kode program menjadi lebih mudah.
Berdasarkan hasil pengujian juga menunjukan bahwa pengembangan website
ini sangat membantu user dalam mencari informasi lengkap tentang kuliner yang ada di Kota Salatiga. Selain dengan detail yang ada dari informasi tiap rumah makan sistem ini juga dapat menunjukan lokasi dari rumah makan yang akan dikunjungi oleh user. Sistem informasi ini masih memiliki beberapa kekurangan dari segi tampilan yang masih sederhana dan jumlah rumah makan yang terpetakan belum mencakup keseluruhan. Untuk penelitian yang selanjutnya diharapkan dapat mengembangkan pemetaan rumah makan, menu order untuk tiap rumah makan dan beberapa fitur lain yang lebih menguntungkan pengguna sistem.
6. Daftar Pustaka
[1] Maulana, Dimas, 2010. Membangun Sistem Informasi Kuliner Bandung Berbasis Web.
[2] Suryaningrat, I Gusti Ngurah Jelantik, 2016. Perancangan Sistem Informasi Wisata Kuliner Berbasis Web Dengan Menggunakan Ajax dan Code Igniter
[3] Amaranggana, A.G., 2014, Crud Laravel Menggunakan Eloquent,
http://aditiyagita.com/laravel/laravel-tutorial-indonesia-crud-laravelmenggunakan-eloquent/, diakses pada tanggal 17 Agustus 2018.
[4] Sandi, Anugrah, 2017. Mengirim Email dengan Laravel 5.3,
https://daengweb.id/mengirim-email-dengan-laravel-53. Diakses tanggal 10 Juni 2018
[5] Arief, M. Rudyanto, 2011. Pemrograman Web Dinamis menggunakan PHP dan MySQL, Yogyakarta: Andi Publisher
[6] Marcotte, Ethan. 2011. Responsive Web Design, http://www.alistapart.com/articles/responsive-web-design/. Diakses tanggal 17 Juni 2018.
[7] Hazibuan, Zainal A., 2007, Metodologi Penelitian Pada Bidang Ilmu Komputer Dan Teknologi Informasi. Fakultas Ilmu Komputer Universitas Indonesia.
[8] Rohman, A. (2014). Mengenal Framework “Laravel” (Best PHP Frameworks For 2014). In A. Rohman, Mengenal Framework Laravel (Best PHPFrameworks For 2014). ilmuit.org.
[9] Bean, M. (2015). Laravel 5 Essentials. Birmingham: Packt Publishing Ltd.
[10] Kasman, A. D. (2015). Framework Laravel 5 Panduan Praktis dan Trik Jitu. (A. Saputra, Ed.) (Cetakan Pe). CIrebon: CV. ASFA Solution.
20
[11] Anhar, 2010. Panduan Menguasai PHP & MySQL Secara Otodidak. Jakarta Selatan: mediakita.
