Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and...

23
Pengembangan Sistem Informasi Kontes Foto Menggunakan Framework Laravel 5.0 (Studi Kasus : Aftermoment Fotografi) Artikel Ilmiah Diajukan kepada Fakultas Teknologi Informasi untuk memperoleh Gelar Sarjana Komputer Peneliti: Mahendra Galuh Saputra (672011038) Suprihadi, S.Si., M.kom. Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga November 2016

Transcript of Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and...

Page 1: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

Pengembangan Sistem Informasi Kontes Foto

Menggunakan Framework Laravel 5.0 (Studi Kasus :

Aftermoment Fotografi)

Artikel Ilmiah

Diajukan kepada

Fakultas Teknologi Informasi

untuk memperoleh Gelar Sarjana Komputer

Peneliti:

Mahendra Galuh Saputra (672011038)

Suprihadi, S.Si., M.kom.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

November 2016

Page 2: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could
Page 3: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could
Page 4: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could
Page 5: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could
Page 6: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

Pengembangan Sistem Informasi Kontes Foto

Menggunakan Framework Laravel 5.0 (Studi Kasus :

Aftermoment Fotografi)

Artikel Ilmiah

Oleh:

Mahendra Galuh Saputra

NIM: 672011038

Telah disetujui direview:

Tanggal:………………………

Pembimbing

Suprihadi, S.Si., M.Kom.

Page 7: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

Pernyataan

Yang bertanda tangan di bawah ini :

Nama : Mahendra Galuh Saputra

NIM : 672011038

Program Studi : Teknik Informatika

Fakultas : Teknologi Informasi

menyatakan dengan sesungguhnya bahwa tugas akhir dengan judul :

Pengembangan Sistem Informasi Kontes Foto Menggunakan

Framework Laravel 5.0 (Studi Kasus :Aftermoment Fotografi)

yang dibimbing oleh :

1. Suprihadi, S.Si., M.Kom.

adalah benar-benar hasil karya saya.

Di dalam tugas akhir ini tidak terdapat keseluruhan atau sebagian tulisan atau

gagasan orang lain yang saya ambil dengan cara menyalin atau meniru dalam

bentuk rangkaian kalimat atau gambar serta simbol yang saya akui seolah-olah

sebagai karya saya tanpa memberikan pengakuan pada penulis atau sumber aslinya.

Salatiga, 22 November 2016

Yang memberi pernyataan,

Mahendra Galuh Saputra

Page 8: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

1

Pengembangan Sistem Informasi Kontes Foto

Menggunakan Framework Laravel 5.0 (Studi Kasus

:Aftermoment Fotografi)

1) Mahendra Galuh Saputra 2) Suprihadi, S.Si., M.Kom.

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50771, Indonesia

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

Abstract Photography is growing faster nowadays that it makes the number of young photographer

improve significantly. One of photo studio named "After moment"which has been

established in Salatiga aims to promote photography in the town.This photo studio often

held photography exhibition especially for young people.In this event they could meet each

other to share their knowledge and experiences, discuss and improve their skill

accordingly.This event hopefully could give good impact to the photographer in

Indonesia.By the time with the high cost faced by the photographer, we design the research

to held a photo contest in helping the young photographer " to compete" in health

environment. The website develop in this research is made using lavarel 5 framework.

This framework is easy to understand and it has simple structure. This framework will be

used to help studio photography in improving their performance. Based on 63.3%

responden that has been review the website, they feel satisfy and comfortable with this

website. This result will be used to pointed that the website could be work as one of useful

tools for "Aftermoment" studio.

Keyword :Website, Lavarel 5 Framework, Photography Studio

Abstrak Dengan berkembang pesatnya dunia fotografi maka para fotografer muda semakin

meningkat.Aftermoment fotografi sebagai salah satu studio foto yang cukup lama di

Salatiga.Studio foto ini sering mengadakan pamerran foto bagi para fotografer muda untuk

bertemu dan bertukar komentar dimana hal ini diharapkan dapat membawa dampak positif

bagi dunia fotografer Indonesia.Namun seiring berjalannya waktu biaya menjadi semakin

tinggi, oleh karena itu dalam penelitian ini dibuat sebuah kontes foto yang membantu

fotografer muda untuk bersaing secara sehat.Pembuatan website pada penelitian ini

dilakukan dengan menggunakan framework laravel 5 yang dikenal sebagai framework

yang mudah dipahami dan terstruktur.Penggunaan framework di dasarkan untuk

membantu studio foto apabila ingin mengembangkan lebih lanjut. Berdasarkan hasil 63,3

% responden yang menguji website ini merasa puas dan nyaman sehingga web ini dapat

digunakan sebagai alat bantu untuk studio Aftermoment fotografi.

Kata Kunci:Website, FrameworkLaravel 5, Studio Foto.

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 9: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

2

1. Pendahuluan

Fotografi merupakan hobi yang saat ini sedang marak dan berkembang pesat,

kamera yang semakin terjangkau harganya membuat orang-orang memakai dan

mulai dikembangkan ke dunia bisnis seperti pembuatan studio fotografi.Studio

fotografi tidak hanya digunakan untu berbisnis namun studio foto juga digunakan

untuk mengumpulkan para komunitas fotografi.Studio foto Aftermoment

merupakan studio foto yang sudah lama hidup di Salatiga dan berdiri sejak

2011.Berbagai inovasi dilakukan studio foto ini untuk terus menarik para

pengunjung.Salah satu event yang sudah lama diadakan adalah lomba

fotografi.Lomba ini digunakan untuk membantu para fotografer muda dapat

menunjukan karya mereka.Namun semakin berkembangnya jaman maka hal ini

menjadi masalah dimana informasi pemenang masih tertera di papan pengumuman

studio sehingga para pemenamg harus mendatangi studio terlebih dahulu,

pemilihan pemenang, serta mahalnya biaya untuk menyelanggarakan pameran

foto.

Berdasarkan kasus di atas maka pemilik studio meminta untuk memberikan

sebuah solusi dalam permasalahan diatas.Dalam rangka menyelesaikan

permasalahan di atas maka tercipta sebuah website yang mampu membantu pemilik

studio untuk tidak perlu mengeluarkan biaya untuk sebuah galery foto. Sehingga

perlu dibuat sebuah media untuk mempersingkat segala proses lomba fotografi

serta tetap menarik para fotografer muda untuk bergabung.

Berdasarkan latar belakang yang telah dijelaskan, didapatkan rumusan

masalah dari penelitian ini yaitu bagaimana membuat website yang dapat

membantu para fotografer muda untuk memamerkan karya mereka, serta dapat

membantu studio foto Aftermoment mendapatkan stok foto.Fokus dari penelitian

ini sendiri adalah menyelesaikan permasalahan yang di alami oleh studio foto

Afteromoment sehingga memiliki batasan dalam pembahasan. Batasan tersebut

antara lain adalah proses pemberian hadiah menggunakan cara konvensional yaitu

dengan datang ke kantor,pada website yang dibuat hanya menampilkan informasi

pemenang saja serta memudahkan untuk para peserta mengetahui siapa pemenang

pada event tersebut, pemilihan pemenang juga akan dilakukan oleh owner dari

Aftermoment fotografi dengan cara langsung memilih foto pada website dan

menandai sebagai pemenang dimana sudah ditentukan secara manual oleh para

juri, selain itu batasan dilakukan bahwa tidak ada batasan umur, lokasi untuk

fotografer yang mendaftar. Dalam proses bisnisnya setiap peserta hanya dapat

memilih satu kategori event saja.

Media ini berbentuk sebuah website yang dibuat dengan menggunakan

teknologi MVC yang di implementasikan ke dalam sebuah framework atau sebuah

kerangka bantu dalam pengerjaan, framework ini masih menjadi framework yang

memiliki struktur paling nyaman. Framework yang akan digunakan yaitu laravel

5, framework ini memiliki kerangka yang cukup nyaman dan memiliki tingkat

fleksibilitas yang tinggi sehingga memungkinkan website ini dapat dikembangkan

dengan mudah. Salah satu kemudahan yang ditawarkan adalah sistem template

yang memudahkan dalam membangun suatu website dengan layout yang sama.

Page 10: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

3

2. Kajian Pustaka

Fotografi menurut Mulyanta dalam jurnal fotografi miliknya mengatakan

bahwa fotografi merupakan perubahan kata foto yang memiliki arti cahaya dan

grafis yang berarti gambar.Seiring berkembangnya teknologi digital yang sangat

cepat dan tidak tertahankan saat ini bahkan hampir semua orang.1 Secara harfiah

fotografi bisa diartikan sebagai teknik melukis dengan cahaya.Fotografi

merupakan gabungan ilmu, teknologi, dan seni.Perpaduan yang harmonis antara

ketiganya bisa menghasilkan sebuah karya yang mengagumkan. Tentunya dengan

skill serta sentuhan seni sang fotografer, sebuah foto bisa menjadi berarti. 2

Fotografi memiliki bermacam-macam manfaat dan tujuan baik untuk dokumentasi,

penelitian, maupun sebagai media dalam ranah estetika.Dengan foto, suatu momen

bisa bertutur.[1]

Pembuatan website galeri sebelumnya juga telah dilakukan oleh Enriko

dalam jurnalnya yang berjudul perancangan website galeri foto menggunakan php

dan mysql untuk komunitas fotografi kamera droid Yogyakarta dimana pada

penelitian ini peneliti juga membantu para fotografer untuk mendapatkan tempat

pemasaran.Pembuatan website ini masih menggunakan php dan mysql dimana pada

penelitian ini penulis mengatakan masih merasa optimal apabila dengan

menggunakan phpatau mysql.[2]

Selain dengan pembuatan website yang bermodel gallery, penulis juga

terinspirasi untuk memecahkan studi kasus ini dari sebuah penelitian yang

dilakukan Rere Reza Lufia dengan judul “Desain dan Implementasi Web untuk

Tutorial dan Kompetisi Fotografi dengan fitur SMS Gateway”, pada penelitian ini

peneliti menggunakan metode kompetisi untuk mengapresiasi para fotografer

namun lebih menekankan pada penggunaan sms gateway. Penelitian ini

menggunakan php native. [3]

Pada penelitian ini penulis akan membuat sebuah webapps untuk kontest foto

dimana Web application adalah software yang dijalankan melalaui web

server.Tidak seperti aplikasi desktop yang dapat dijalankan secara langsung

melalui sistem operasi, web application hanya bisa diakses melalui web browser.

Web application ini memiliki beberapa keuntungan dibandingkan dengan aplikasi

desktop, yaitu dia bisa dijalan kan dimapun tidak peduli apapun sistem operasi yang

menjalankannya, asalkan terdapat web browser aplikasi ini dapat berjalan dengan

baik [4].

Penggunaan laravel juga digunakan oleh Aries Dwi Indrayanti

untuk penelitian berjudul pembuatan forum makanan berbasis web. Berdasarkan

hasil dari penelitian didapat bahwa laravel merupakan framework yang cocok

untuk sebagai landasan awal untuk pembuatan produk teknologi. Selain itu Aries

Dwi Indrayanti juga membahas mengenai fleksibilitas laravel yang cukup tinggi

karena adanya fitur package sehingga memudahkan seseorangu untuk dapat

menambahkan fitur sesuai kebutuhan. [5]

Penggunaan laravel tidak hanya digunakan untuk membangun suatu web

atau sistem namun juga dapat digunakan sebagai alat bantu di bidang geografis ,

seperti yang telah dilakukan oleh Maulana Nurul Hakim di dalam penelitianya

yang berjudul Perancangan Sistem Informasi Geografis Untuk Memudahkan

Pencarian Informasi Fasilitas Sosial dan Lokasinya. Dalam penelitian ini Maulana

Page 11: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

4

menggunakan laravel sebagi alat bantu untuk berkomunikasi dengan google map

yang dimana akan diberikan data data berupa lokasi penting di daerah garut.

Berdasarkan penelitian ini laravel dianggap mampu untuk di implementasi ke

dalam fasilitas google map. [6]

3. Metode Penilitian dan Perancangan Sistem

Penelitian ini dilakukan dan diselesaikan melaui 5 tahapan penelitian yaitu :

1) Analisis Kebutuhan dan pengumpulan data. 2) Perancangan sistem. 3)

Perancangan aplikasi / program. 4) Implementasi dan pengujian sistem serta

analisis hasil pengujian. 5) Penulisan laporan hasil penelitian [7]. 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: Tahap pertama analisis kebutuhan dan

pengumpulan data, dimana pihak pengembang mencari informasi mengenai

kebutuhan dari pengguna yang berhubungan dengan pembuatan aplikasi. Proses

pencarian informasi ini dilakukan dengan melakukan wawancara kepada Yudha

Ibnu selaku pemilik dari studio. Berdasarkan hasil wawancara dengan owner dari

studio Aftermoment maka di dapatkan bahwa pihak studio Aftermoment

mengalami kesulitan dalam membangun kontes lomba karena lokasi, cuaca dan

biaya yang tidak mendukung.Untuk tahap kedua ketiga dan keempat dilakukan

perancangan sistem kontes lomba dan desain interface.Untuk tahap kelima

dilakukan penulisan laporan ilmiah dan artikel ilmiah.

Metode pengembangan sistem yang digunakan pada penelitian ini adalah

metode Prototyping, karena selama proses pengembangan dilakukan komunikasi

secara intensif antara pengembang dengan pengguna. Metode ini membantu proses

pengembangan suatu perangkat lunak dengan cara model dari perangkat lunak

yang akan dibuat. Pengembangan perangkat lunak ini dilakukan secara bertahap,

yaitu dengan membuat prototype yang sederhana terlebih dahulu, setelah itu

prototypeakan dikembangkan dari waktu ke waktu hingga perangkat lunak selesai

dikembangkan atau sudah sesuai dengan kebutuhan dari pengguna [8]. Tahap-

tahap yang dilakukan pada metode prototype ditunjukan pada Gambar2.

Page 12: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

5

Gambar 2 Metode Prototype [8]

Tahap pertama dalam metode Prototype adalah listen to customer, tahap ini

dilakukan untuk mengetahui informasi mengenai kebutuhan pengguna yang perlu

ada dalam sistem yang akan dikembangkan. Kemudian informasi yang sudah

didapatkan dianalisa dan diterjemahkan ke dalam bentuk yang lebih mudah untuk

diimplementasikan kedalam sistem.

Berdasarkan informasi yang telah diperoleh dari wawancara dengan Yudha

Ibnu didapatkan beberapa informasi salah satunya adalah kategori dan bagaimana

prosedur yang baik dalam proses pemilihan. Dimana para peserta hanya dapat

memberikan 1 foto saja untuk kategori yang di ikuti, hal ini dilakukan untuk

menjaga agar kompetisi tidak di dominasi oleh satu orang saja, setelah itu maka

pihak studio akan melakukan pemilihan dimana dalam tahap ini sudah tidak ada

lagi yang dapat melakukan submit. Apabila informasi tersebut di olah dalam

flowchart maka akan menghasilkan bentuk seperti pada Gambar 3.

START

Proses Daftar mendaftar

Masukkan Username dan

Password

Berhasil Mendaftar ?

Tidak

Memilih Kategori

Ya

Memilih Event

Upload Foto

B

B

Berhasil Upload

Tunggu Hasil Pemilihan foto

Menang ?

Mendapat Konfirmasi Email

Peserta Ambil Hadiah di Lokasi

END

Tidak

Ya

Ya

Tidak

Gambar 3 Flowchart Pendaftaran event

Page 13: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

6

Dari Gambar 3 terlihat bahwa setelah melakukan pendaftaran maka peserta

dapat memilih kategori lomba yang kemudian dilanjutkan proses upload, apabila

peserta telah melakukan upload maka peserta tidak dapat melakukan upload

kembali, apabila sudah memasuki waktu yang telah ditentukan maka pihak studio

akan menutup masa pengumpulan file sehingga para peserta hanya dapat

menunggu dan tidak dapat mengikuti kategori tersebut. Apabila admin telah

menyelesaikan maka admin akan mengumumkan pemenang sehingga peserta akan

mendapatkan email pemberitahuan.

Analisiskebutuhan perangkat keras dan spesifikasi perangkat lunak yang

digunakan dalam membangun jurnal elektronik ini yaitu: analisisperangkat keras

yang akan digunakan adalah Processor I5, 1.90 GHz, RAM 8 GB dan Hardisk 500

GB. Sedangkan perangkat lunak yang digunakan adalah sistem operasi Linux

Ubuntu 16.04, Sublime Text 3, XAMPP Server (Apache, MySQL, PHP), Web

browser (dalam penelitian ini digunakan Opera) dan Rational Rose untuk membuat

UML dan Microsoft Visio 2010 untuk pembuatan flowchart.

Perancangan sistem dalam penelitian ini dibuat dalam bentuk diagram UML.

Diagram UML meliputi usecase diagram, activity diagram dan class diagram.

Berikut ini akan dijelaskan masing-masing diagram yang telah dibuat.

Gambar 4 Use Case Diagram

Gambar 4 merupakan use case yang menjelaskan bagaimana aplikasi akan

dibuat. Sistem ini memiliki dua aktor yaitu admin , peserta. Aktor admin memiliki

hak akses paling tinggi dimana memiliki hak untuk mengatur lomba, dan mengatur

data dari peserta, aktor yang kedua adalah peserta yang memiliki hak hanya dapat

melakukan upload file dan melakukan pendaftaran saja.

Page 14: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

7

Gambar 5 Activity Diagram Pendaftaran Member Baru.

Gambar 5 merupakan activity diagram yang menggambarkan proses

pendaftaran peserta. Aktivitas dimulai dari peserta login kedalam sistem terlebih

dahulu, jika user sudah terdaftar maka peserta tidak akan dapat masuk, apabila data

tidak ditemukan maka sistem akan mengambil data user kemudian akan disimpan

ke dalam sistem.

Gambar 6 Activity Diagram Pengumpulan Foto.

Page 15: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

8

Gambar 6 merupakan activity diagram bagaimana proses pengumpulan hasil

foto hingga proses pemilihan pemenang. Proses diawali dari peserta memilih

kategori kemudian peserta dapat memilih foto dari komputer untuk diupload.

Setelah proses upload maka peserta dapat menunggu proses pemilihan oleh admin

hingga pemenang lomba ditentukan. Apabila pemenang lomba telah ditentukan

maka pemenang akan mendapatkan email notifikasi.

Gambar 7 Activity Diagram Edit Foto Di User Panel.

Gambar 7 merupakan activity diagram untuk menunjukan bagaimana proses

admin dalam menentukan pemenang foto untuk setiap event.

Gambar 8 Activity Diagram Admin Menentukan Pemenang.

Page 16: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

9

Gambar 8 merupakan activity diagram yang menggambarkan proses saat

admin telah menentukan pemenang maka userakan mendapat email dan dapat

melakukan login kembali untuk melihat pemenang dari kontes.

Gambar 9 Class Diagram

Gambar 9 merupakan penggambaran dari class class yang ada di dalam

aplikasi yang akan dikembaangkan. Berdasarkan pada Gambar 9 terdapat 2 jenis

class utama yaitu class model dan class controller. Class model digunakan untuk

melakukan komunikasi antara aplikasi dengan database, sedangkan class

controller digunakan untuk mengolah data dari model dan menampilkan pada user

interface.

4. Hasil Implementasi dan Pembahasan

Pada penelitian ini peneliti membagi user menjadi 2 bagian utama dan 1 user

umum yaitu admin, pengunjung terdaftar dan pengunjung umum.User admin

adalah user yang di pegang oleh pemilik studio dimana hak yang terdapat di admin

adalah kemampuan untuk membuat event, membuat kategori dan menentukan

pemenang.Admin juga memiliki hak untuk menghapus komentar yang tidak tepat

di kolom komentar.Pengunjung terdaftar dapat dikatakan user umum yang

mengikuti kompetisi ini sehingga memiliki hak untuk memilih lomba dan

Page 17: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

10

mengunggah informasi.Terakhir adalah pengguna umum dimana memiliki hak

untuk berkomentar dalam setiap foto yang diterbitkan oleh admin.

Berikut adalah halaman admin ketika admin sudah login dan sudah

diverifikasi oleh sistem. Pada halaman ini terdapat panel dimana admin dapat

menentukan akan memanajemen di bidang apa. Tampilan admin ditunjukan oleh

gambar 10.

Gambar 10 Admin Panel

Gambar 11 Halaman Kategori Event.

Gambar 11 merupakan halaman apabila admin akan mengganti kategori,

dimana terdapat tabel berisikan kategori apa saja yang ada beserta tombol edit dan

delete untuk setiap data yang ada, apabila admin ingin menambahkan maka admin

hanya perlu mengklik tombol tambah maka sistem akan menampilkan form untuk

pengisian data. Selain untuk memanajemen proses CRUD halaman ini juga

menyediakan tombol show untuk membantu menampilkan event untuk kategori

tersebut. Berikut adalah kode program untuk menampilkan tabel dan fungsi

controller yang menangani.

Kode Program 1 Perulangan Mengambil Data Event

1.Controller

2.public function lihat($id)

3. {

4. $comments = Comment::where('foto_id',$id)->orderBy('created_at','ASC')-

>get();

5. $foto = Foto::find($id);

6. return view('admin.fotos.show',['foto'=>$foto,'comments'=>$comments,]);

7. }

8.

9.VIEW

10.<div class="container">

11.<div class="panel panel-default">

12.<div class="panel-heading">

13. List Kategori Event

14.</div>

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

16.<div class="form-group">

17.<div class="pull-right">

18.<a href="kategoris/create" class="btn btn-default">Add New Kategori</a>

Page 18: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

11

Gambar 12 Halaman Show Di Menu Kategori.

Kode Program 2 Perulangan Mengambil Data Kategori

Pada halaman ini admin dapat melihat detail event yang ada di kategori

tersebut, seperti pada gambar terdapat event “foto orang tua dan anak” pada

kategori manusia. Atribut hyperlink ditambahkan pada namaevent sehingga apabila

di klik akan masuk ke detailevent tersebut beserta foto foto yang telah di upload.

Penampakan pada halaman ini dapat dilihat pada gambar 12.

1.<table class="table table-bordered table-stripped">

2.<tr>

3.<th width="20">No</th>

4.<th>Nama Kategori</th>

5.<th width="300">Action</th>

6.</tr>

7. @if (count($kategoris) > 0)

8. @foreach ($kategoris as $key => $kategori)

9.<tr>

10.<td>{{ ++$i }}</td>

11.<td>{{ $kategori->name }}</td>

12.<!--<td>{{ $kategori->description }}</td>-->

13.<td>

14.<a class="btn btn-success" href="{{ route('admin.kategoris.show',$kategori-

>id) }}">Show</a>

15.<a class="btn btn-primary" href="{{ route('admin.kategoris.edit',$kategori-

>id) }}">Edit</a>

16. {{ Form::open(['method' =>

'DELETE','class'=>'delete', 'route' => ['admin.kategoris.destroy', $kategori-

>id],'style'=>'display:inline']) }}

17. {{ Form::submit('Delete', ['class' => 'btn

btn-danger']) }}

18. {{ Form::close() }}

19.</td>

20.</tr>

21. @endforeach

22. @else

23.<tr>

24.<td colspan="4">kategoris not found!</td>

25.</tr>

26. @endif

27.</table>

Page 19: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

12

Gambar 13 Foto Yang Ada Di Event Tersebut.

Kode Program 3 Perulangan Mengambil Data Event

Berikut adalah kode program untuk menampilkan event detail dimana

halaman ini akan di atur di foto controller dan apabila alamat tersebut di akses

maka foto controller akan memangill fungsi yang kemudian akan mengembalikan

tampilan.

Gambar 13 merupakan halaman detail foto untuk setiap event, apabila foto

tersebut di klik maka akan berpindah halaman dan akan menampilkan foto detail,

halaman ini juga akan berisikan fitur untuk menentukan siapa pemenangnya.

129.CONTROLLER

130.public function show($id)

131. {

132. $event = Event::find($id);

133. if($event->foto_win!==null){

134. $winner = Foto::where('id',$event->foto_win)->first();

135. $fotos = Foto::where('acc',1)->where('event_id',$id)-

>whereNotIn('id',[$event->foto_win])->orderBy('created_at', 'asc')-

>paginate(6);

136. return view('admin.events.show',['event'=>$event,'i'=>0,

'fotos'=>$fotos,'winner'=>$winner]);

137. }

138. else{

139. $fotos = Foto::where('acc',1)->where('event_id',$id)-

>orderBy('created_at', 'asc')->paginate(6);

140. return view('admin.events.show',['event'=>$event,'i'=>0,

'fotos'=>$fotos,]);

141. }

142. }

143.VIEW

144.<div class="container">

145.<div class="panel panel-default">

146.<div class="panel-heading">

147. Lihat Event

148.</div>

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

150.<div class="pull-right">

151.<a class="btn btn-default" href="{{ route('admin.events.index') }}">Go

Back</a>

152.</div>

153.<div class="form-group">

154.<strong>Nama Event: </strong> {{ $event->name }}

Page 20: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

13

Gambar 14 Detail Foto.

Gambar 14 merupakan foto detail dimana admin dapat melihat foto secara

besar dan dapat melakukan eksekusi terhadap foto tersebut mulai dari comment

hingga memilih menjadi pemenang. Berikut adalah kode program untuk

menampilkan detail dan juga menampilkan fungsi untuk menentukan sebagai

pemenang.

Kode Program 4 Melakukan Set Pemenang

Pada kode program 4 dapat kita lihat ketika admin mengklik tombol set

sebagai pemenang maka sistem akan mengirimkan id ke controller dimana id

tersebut akan diambilkan dicari dari tabel event dengan id tersebut dan akan

mengganti status menjadi pemenang, selain mengganti status maka id tersebut akan

digunakan untuk mengganti mode event menjadi finished event.

203.public function win(Request $request,$id){

204. $event = Event::find($id);

205. $foto = Foto::find($request->input('foto_id'));

206. $event->update(['foto_win'=>$foto->id,

207. 'is_finish'=>'1',

208. 'user_win'=>$foto->user['id']

209. ]);

210.return redirect()->route('admin.events.index')->with('success', 'Event

'.$event->name.' telah selesai!');

211. }

Page 21: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

14

Gambar 15Galeri Foto.

Gambar 15 merupakan galeri dari semua foto yang ada di sistem.Berikut

adalah semua fasilitas yang dimiliki admin. Berikut adalah kode program

routes.php yang berfungsi mengatur seluruh jalanya sebuah website termasuk url

mana saja yang dapat di akses oleh admin maupun non admin.

Kode Program 5Kode Route

212.Route::get('/', function () {

213. return view('welcome');

214.});

215.

216.Route::get('fotokategori',['as'=>'fotokategori',

'uses'=>'KategorisController@fotoByKat1']);

217.Route::post('fotokategori',['uses'=>'KategorisController@fotoByKat2']);

218.Route::get('foto/lihat/{id}',['as'=>'lihatfoto','uses'=>'FotosController@li

hat']);

219.Route::get('comments/{id}',['as'=>'showcomment','uses'=>'CommentsController

@show']);

220.Route::post('comments',['as'=>'postcomment','uses'=>'CommentsController@sto

re']);

221.

222.Route::get('/home', ['as'=>'home','uses'=>'HomeController@index']);

223.

224.Route::auth();

225.

226.Route::group(['middleware'=>'auth:web'],function(){

227. Route::get('foto',['as'=>'peserta.foto','uses'=>'PesertasController@foto

']);

228. Route::post('foto',

['as'=>'peserta.foto.store','uses'=>'PesertasController@store']);

229. Route::get('foto/edit',['as'=>'peserta.foto.edit','uses'=>'PesertasContr

oller@edit']);

230. Route::patch('foto/edit',['as'=>'peserta.foto.update','uses'=>'PesertasC

ontroller@updateFoto']);

231.

232. Route::get('events',

['as'=>'events.list','uses'=>'PesertasController@indexEvent']);

233. Route::get('events/show/{id}',

['as'=>'events.show','uses'=>'PesertasController@showEvent']);

234. Route::patch('events',

['as'=>'events.ikut','uses'=>'PesertasController@ikut']);

235.});

Page 22: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

15

Pengujian aplikasi dilakukan dengan menggunakan kuesioner dimana dengan

tujuan apakah navigasi yang telah dibuat dapat berjalan dengan lancar atau tidak,

yaitu dengan membagikan kuesioner kepada sampleuser. Sampleuser berjumlah 30

responden dan dipilih secara acak, sample user pada pengujian ini adalah fotografer

yang tinggal di Salatiga.Hasil pengujian responden dapat dilihat pada Tabel 1.

Tabel 1 Hasil Pengujian Responden

No

Pertanyaan

Jawaban Responden (Presentase)

Ya Cukup Tidak

1 Apakah anda merasa mendapat

informasi lomba dengan lengkap ?

43,3% 36,6% 20,1%

2 Apakah anda merasa nyaman dengan

navigasi yang telah disediakan?

73,3% 20,1% 6,6%

3 Apakah proses pendaftaran dirasa

cukup mudah?

66,6% 23,4% 10%

4 Apakah informasi pada sistem sudah

dapat memudahkan anda dalam

pengoperasian?

73,3% 16,7% 10%

5 Apakah navigasi admin mudah

dimengerti?

60% 13,3% 26,7%

Jawaban responden yang telah mengisi kuesioner, hasil analisis data untuk

pertanyaan 1 menunjukkan sebanyak43,3% responden menjawab ya, 36,6%

responden menjawab cukup dan 20,1% responden menjawab tidak. Jadi

disimpulkan bahwa aplikasi ini dapat memberikan informasi lomba dengan lengkap.

Hasil analisis data untuk pertanyaan 2 menunjukkan sebanyak 73,3%

responden menjawab ya, 20,1% responden menjawab cukup dan 6,6% responden

menjawab tidak. Jadi disimpulkan bahwa nyaman dengan navigasi yang telah

disediakan. Hasil analisis data untuk pertanyaan 3menunjukkan sebanyak

66,6%responden menjawab ya, 23,4%responden menjawab cukup dan 10%

responden menjawab tidak. Jadi disimpulkan bahwa proses pendaftaran dirasa cukup

mudah.

Hasil analisis data untuk pertanyaan 4 menunjukkan sebanyak 73,3%

responden menjawab ya, 16,7%responden menjawab cukup dan 10%responden

Page 23: Pengembangan Sistem Informasi Kontes Foto Menggunakan ... · other to share their knowledge and experiences, discuss and improve their skill accordingly.This event hopefully could

16

menjawab tidak. Jadi disimpulkan bahwa informasi pada sistem sudah dapat

memudahkan dalam pengoperasian.

Hasil analisis data untuk pertanyaan 5 menunjukkan sebanyak 60%

responden menjawab ya, 13,3% responden menjawab cukup dan 26,7% responden

menjawab tidak. Jadi disimpulkan bahwa navigasi admin mudah dimengerti.

5. Simpulan

Berdasarkan penelitian yang telah dilakukan di dapatkan bahwa dengan

penggunaan website maka proses seleksi dan pemilihan foto menjadi sangat mudah

dan nyaman serta pameran foto tidak memakan waktu, tempat dan biaya yang

mahal. Selain itu penggunaan framework membantu dalam proses pengembangan

websitedikarenakan dalam Laravel di bagi menjadi 3 modul utama yaitu Controller

sebuah modul yang mengurus untuk interakesi database, Model sebuah modul

yang berurusan dengandatabase dan yang terakhir adalah View modul yang

berurusan denga tampilan. Pembagian modul ini memudahkan para pengembang

selanjutnyauntuk membagi tugas. Dengan menggunakan kuesioner maka didapat

bahwa website yang dibuat menghasilkan angka 63,3% sudah sangat terbantu

dengan adanya website kontes foto.

6. Pustaka

[1] Mulyanta,Edi 2007. Teknik Modern Fotografi Digital, e-journal UAJY.

[2] Damas, Enriko.2013. Perancangan Website Galeri Foto Menggunakan

PHP danMYSQL UntukKomunitas Fotografi Kamera Droid

Yogyakarta. Naskah Publikasi AMIKOM.

[3] Rere,RezaLufia.2014,Desain dan Implementasi Web untuk Tutorial dan

Kompetisi Fotografi dengan fitur SMS Gateway.

[4] techterms.com,2014, Web Application, available :

http://techterms.com/definition/web_application, diakses pada 4 Oktober

2016

[5] Indrayanti,Dwi 2015. Perancangan dan Pembuatan Forum Makanan

Berbasis Web, jurnal Manajemen Informatika.

[6] Nurul , Hakim 2015. Perancangan Sistem Informasi Geografis Untuk

Memudahakan Pencarian Informasi Fasilitas Sosial dan Lokasinya, Jurnal

Algoritma Sekolah Tinggi Garut.

[7] Hasibuan, Zainal A. 2007. Metodologi Penelitian Pada Bidang Ilmu

Komputer dan Teknologi Informasi : Konsep, Teknik, dan Aplikasi.

Jakarta : Ilmu Komputer Univesitas Indonesia.

[8] Pressman, R.S. 2001. Software Enginering : A Practitioner's Approach.

Amerika Serikat : R.S. Pressman and Associates.