1

Pengembangan Website Keanggotaan PERBAKIN (Persatuan

Tembak Menembak Indonesia) menggunakan Framework Laravel

(Studi Kasus : Defender Shooting Club Pusat, Magelang)

Artikel Ilmiah

Oleh:

Fajar Dwi Utara (672014105)

Nina Setiyawati, S.Kom., M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

2018

2

3

4

5

6

1. Pendahuluan

Defender Shooting Club merupakan organisasi yang bergerak dalam bidang

olahraga menembak dibawah naungan induk olahraga menembak seluruh Indonesia yaitu

PERBAKIN (Persatuan Tembak Menembak Indonesia). Defender Shooting Club telah

resmi dibawah PERBAKIN setelah disahkan kepengurusan Defender Shooting Club oleh

pengurus cabang PERBAKIN kabupaten Semarang melalui surat keputusan

No.017/Pbk.Kab.Smg/IX/2010 dan telah resmi dikukuhkan atau dilaksanakan pelantikan

pengurus Defender Sooting Club oleh ketua harian pengurus cabang PERBAKIN

Kabupaten Semarang pada tanggal 29 Oktober 2010 di Salatiga. Pengurus Defender

Shooting Club terdiri dari kalangan TNI, POLRI, anggota RESIMEN mahasiswa, alumni

resimen mahasiswa serta beberapa pelajar setingkat SLTA. Defender Shooting Club

memiliki tiga cabang olahraga menembak yaitu tembak target, tembak reaksi dan

berburu. Defender Shooting Club terbuka dalam menerima anggota untuk masyarakat dari

seluruh Indonesia[1].

Defender Shooting Club pada tahun 2012 telah membuat web resmi dengan

menggunakan blogspot dengan alamat www.defendersc.com/. Blog tersebut berisi tentang

informasi yang berkaitan dengan Defender Shooting Club seperti profil, pengurus,

keanggotaan, sekretariat, dan info. Di web tersebut hanya mencantumkan tata cara

seseorang untuk menjadi anggota atau seseorang yang ingin melihat status

keanggotaannya[1]. Defender Shooting Club tidak mempunyai sistem untuk penyimpanan

data, dimana dalam satu tahun setidaknya Defender Shooting Club menerima ratusan

anggota. Masyarakat yang ingin menjadi anggota diharuskan mengisi data pribadi dengan

datang ke kantor Defender Shooting Club untuk menjadi anggota. Registrasi tersebut

dirasa kurang efektif karena masyarakat memerlukan waktu dan biaya yang lebih hanya

untuk menjadi anggota Defender Shooting Club. Oleh karena itu diperlukan sistem

informasi berbasis web untuk membantu proses penyampaian informasi, penyimpanan

data, proses registrasi dan pengelolaan data anggota.

Berdasarkan latar belakang yang ada, maka dilakukan penelitian yang bertujuan

untuk merancang dan implementasi sistem informasi pengelolaan data Defender Shooting

Club berbasis web menggunakan framework Laravel. Sistem ini mendukung

penyampaian informasi yang ada di Defender Shooting Club, registrasi keanggotaan dan

berhubungan dengan pengdokumentasian data anggota. Menggunakan framework Laravel

karena Laravel merupakan pengembangan aplikasi berbasis MVC (Model, view,

Controller) yang ditulis dalam PHP yang dirancang untuk meningkatkan kualitas

perangkat lunak dengan mengurangi biaya pengembangan awal, biaya pemeliharaan dan

untuk meningkatkan pengalaman bekerja dengan aplikasi dengan menyediakan sintaks

yang ekspresif, jelas dan menghemat waktu. Dengan framework Laravel memudahkan

maintenance dan pengembangan aplikasi dimasa yang akan datang, karena konsep MVC

berfungsi untuk mengatur arsitektur sebuah aplikasi dengan memisahkan fungsi-fungsi

yang sejenis sehingga mempermudah dalam pembaharuan aplikasi[2].

7

2. Tinjauan Pustaka

Penelitian ini mengacu pada dua penelitian terdahulu. Penelitian yang pertama

berjudul Sistem Informasi Manajemen Keanggotaan Pada Sekolah Tinggi Manajemen

Informatika dan Komputer Kopma UGM Berbasis Web, membahas tentang memberikan

kemudahan bagi anggota dari KOPMA UGM guna mengakses informasi keanggotaannya

pada Kopma UGM. Web dibangun menggunakan bahasa pemrograman PHP dan Mysql

sebagai database, serta didukung dengan program Wampserver 2.0 sebagai web server

dan Micromedia Dreamweaver 8 sebagai tools pembangun aplikasi. Prosedur yang

terlibat dalam sistem ini yaitu prosedur pengelolaan data mahasiswa UGM mendaftar

menjadi anggota koperasi dan prosedur anggota untuk mengakses informasi keanggotaan

pada Kopma UGM[3].

Penelitian kedua yang berjudul Analisis dan Perancangan Sistem Informasi

Registrasi dan Keanggotaan Klub, membahas tentang menganalisis sistem registrasi dan

kemudian merancang sistem registrasi dan keanggotaan pada klub sehingga

mempermudah pengelolaan data dan memperoleh informasi secara cepat yang pada

akhirnya akan meningkatkan kualitas pelayanan dan fasilitas pada klub. Metodologi yang

akan digunakan adalah metode analisis dan metode perancangan. Web dibangun

menggunakan framework Codeigniter dan dengan bahasa pemrograman PHP dan Mysql

sebagai database[4].

Berdasarkan kedua penelitian sebelumnya, sistem informasi dibangun dengan

bahasa pemrograman PHP dengan framework Codeigniter untuk mengefisienkan

penulisan program. Penelitian dibuat untuk mempermudah anggota mendapatkan

informasi tentang registrasi dan mengakses informasi keanggotaan. Rancangan sistem

registrasi ini mempermudah pengelolaan data serta memperoleh informasi secara cepat

yang akan meningkatkan kualitas pelayanan dan fasilitas.

Jika dibandingkan dengan penelitian sebelumnya yang berfokus pada informasi

registrasi keanggotaan, penelitian ini berfokus pada fitur aplikasi Defender Shooting

Club. Fitur yang ada pada aplikasi yaitu notifikasi kepada masyarakat yang berhasil

menjadi anggota dan notifikasi masa berlaku kartu tanda anggota yang sudah habis atau

berhasil diperpanjang melalui email. Aplikasi dibangun menggunakan framework Laravel

yang menggunakan metode MVC(Model-View Controller) untuk mempermudah

pengembangan dan pemeliharan aplikasi tersebut.

Sistem informasi merupakan Suatu sistem yang dibuat oleh manusia yang terdiri

dari komponen-komponen dalam organisasi untuk mencapai suatu tujuan yaitu

menyajikan informasi. Sekumpulan prosedur organisasi yang pada saat dilakasanakan

akan memberikan informasi bagi pengambilan keputusan atau untuk mengendalikan

organisasi. Suatu sistem di dalam suatu organisasi yang mempertemukan kebutuhan

pengolahan transaksi, mendukung operasi, bersifat manajerial, kegiatan strategi dari suatu

organisasi dan menyediakan pihak luar tertentu dengan laporan-laporan yang

diperlukan[5].

8

Sejarah framework Laravel dibuat oleh Taylor Otwell, proyek Laravel dimulai

pada April 2011. Awal mula proyek ini dibuat, karena Otwell sendiri tidak menemukan

framework yang up-to-date dengan versi PHP. Mengembangkan framework yang sudah

ada juga bukan merupakan ide yang bagus, karena keterbatasan sumber daya.

Dikarenakan beberapa keterbatasan tersebut, Otwell membuat sendiri framework dengan

nama Laravel. Oleh karena itu, Laravel mensyaratkan PHP versi 5.3 ke atas[6].

Adapun kelebihan framework Laravel adalah sebagai berikut :

• Expressif, Laravel adalah framework PHP yang expressif, artinya ketika

melihat suatu sintaks Laravel, seorang programmer diharapkan akan langsung

tahu kegunaan dari sintaks.

• Simple, salah satu yang membuat Laravel begitu simple adalah dengan adanya

Eloquent ORM. Misalnya kita ingin mengambil semua data yang ada di dalam

table users, maka yang diperlukan hanya membuat sebuah class model bernama

user, kemudian kita tinggal memasukan semua data dari tabel users tersebut.

Beberapa fitur yang dimiliki oleh framework Laravel adalah sebagai berikut :

• Reverse Routing, mendefinisikan hubungan antara Link dan Route, sehingga

jika suatu saat ada perubahan pada route secara otomatis akan tersambung dengan

link yang relevan.

• Restful Controllers, memberikan sebuah option (pilihan) untuk memisahkan

logika dalam melayani HTTP GET dan permintaan POST.

• Migrations menyediakan versi sistem control untuk skema database, sehingga

memungkinkan untuk menghubungkan perubahan adalah basis kode aplikasi dan

keperluan yang dibutuhkan dalam merubah tata letak database.

3. Metode dan Perancangan Sistem

Penelitian yang berjudul Pengembangan Aplikasi Keanggotaan PERBAKIN

Berbasis Web (Persatuan Tembak Menembak Indonesia) menggunakan Framework

Laravel (Studi Kasus : Defender Shooting Club Pusat, Magelang) ini memiliki

beberapa tahapan yaitu (1) tahap analisis kebutuhan dan pengumpulan data,(2) tahap

perancangan sistem meliputi perancangan sistem,(3) tahap pembangunan sistem,(4)

tahap pengujian sistem.

Analisa Kebutuhan dan Pengumpulan Data

Perancangan Sistem

Pembangunan Sistem

Pengujian Sistem

Gambar 1 Tahapan Penelitian

9

Tahapan penelitian diawali dengan analisis kebutuhan dan pengumpulan data.

Pada tahap ini dilakukan wawancara dengan pengurus Defender Shooting Club yang

beralamat di Jl. Bintan V Perum Laguna, Kalinegoro, Magelang. Dalam wawancara

untuk mengumpulkan data didapatkan masalah yang ada di Defender Shooting Club

yaitu diperlukan suatu portal dalam bentuk aplikasi yang dapat menampung data

anggota Defender Shooting Club sehingga dalam pengelolaan data untuk kebutuhan

Defender Shooting Club seperti registrasi anggota dan penyampaian status

keanggotaan. Berdasarkan wawancara, maka didapatkan suatu permasalahan dan

kebutuhan untuk pembuatan sistem. Tahap pengumpulan data dilakukan setelah

wawancara dengan pengurus Defender Shooting Club. Data yang didapatkan berupa

data anggota, data unit, kegiatan Defender Shooting Club dan kesekretariatan.

Tahap selanjutnya adalah perancangan sistem, pembangunan sistem, dan

pengujian sistem yang dilakukan dengan menggunakan metode prototyping. Metode

prototyping dipilih karena selama proses pengembangan aplikasi terjadi komunikasi

yang intensif dengan pengurus Defender Shooting Club. Pengembangan aplikasi

dengan metode prototyping dilakukan secara bertahap, yaitu dengan membuat

prototype awal, kemudian prototype tersebut akan dikembangkan menjadi aplikasi

yang akan diperbarui menyesuaikan kebutuhan dari pengguna dari waktu ke waktu[8].

Tahapan atau langkah-langkah yang dilakukan pada metode prototyping ditunjukkan

pada Gambar 2.

Gambar 2 Tahapan Metode Prototype[8]

Proses prototyping pada penelitian ini menghasilkan dua siklus. Berdasarkan

Gambar 2, tahapan prototyping dapat dijelaskan sebagai berikut:

Prototyping 1

(1) Listen to customer, yaitu melakukan wawancara dengan klien (Defender Shooting

Club) mengenai aplikasi yang akan dibangun. Dari hasil wawancara didapat

beberapa kebutuhan dan informasi, yaitu: (a) aplikasi yang dapat menampung data

anggota Defender Shooting Club,(b) aplikasi dapat menampilkan seluruh data

anggota berserta detailnya,(c) aplikasi dapat melakukan registrasi anggota baru

Defender Shooting Club, (d) aplikasi dapat memberikan notifikasi kepada calon

10

anggota dan anggota,(e) aplikasi dapat mencetak kartu tanda anggota dengan

format PDF,(f) aplikasi dapat melakukan pencarian berdasarkan kata kunci, id dan

nama anggota dan (g) aplikasi dibuat responsive, yang dimana tampilan aplikasi

akan berubah menyesuaikan lebar layar untuk mempermudah pengunjung

mengoperasikan aplikasi di berbagai perangkat.

(2) Build / revise mock-up, yaitu pembuatan aplikasi setengah jadi. Tahap ini diawali

dengan membuat UML (Unified Modelling Language) berdasarkan kebutuhan

yang telah diperoleh dari wawancara. UML bersifat scalability, yaitu objek lebih

mudah dipakai untuk menggambarkan sistem yang besar dan komplek. UML juga

bersifat dynamic modelling, yaitu model dapat digunakan untuk pemodelan sistem

dinamis dan real time[9]. Diagram yang pertama dibuat adalah use case diagram.

Use case diagram merupakan pemodelan untuk mengetahui kelakuan (behaviour)

sistem informasi yang akan dibuat. Use case diagram mendeskripsikan sebuah

interaksi antara satu atau lebih aktor dengan sistem yang akan dibuat dan

berfungsi untuk mengetahui fungsi apa saja yang ada di dalam sebuah sistem dan

siapa saja yang berhak menggunakan fungsi-fungsi itu[10]. Use case diagram

dalam aplikasi Defender Shooting Club ditunjukkan pada Gambar 3.

Gambar 3 Use Case Diagram

Tambah Data Unit

Edit Data Unit

Hapus Data Unit

Edit Data AnggotaHapus Data Anggota

AnggotaCek Keanggotaan

Registrasi Anggota

Masyarakat

Tambah Galeri

Edit GaleriHapus Galeri

Tambah Info

Edit InfoHapus Info

Data Unit

Verifikasi

Data Anggota

Galeri

Info

Struktur

Administrator

Tambah Struktu

Edit Struktur

Hapus Struktur

11

Gambar 3 menunjukkan use case diagram yang akan digunakan pada

aplikasi pengelolaan data anggota Defender Shooting Club. Administrator di

sini merupakan pengurus Defender Shooting Club yang memiliki akses penuh

dalam mengelola data Defender Shooting Club. Anggota merupakan

masyarakat yang sudah melakukan registrasi untuk menjadi anggota Defender

Shootig Club dan dapat melihat informasi yang ada di Defender Shooting

Club. Sedangkan masyarakat merupakan seseorang yang ingin menjadi

anggota dari Defender Shooting Club.

Alur aktifitas aktor dari awal hingga berakhirnya suatu use case

diagram digambarkan oleh activity diagram. Activity diagram yang dibahas

merupakan aktifitas dari administrator dalam memasukan data Defender

Shooting Club dan aktifitas masyarakat menjadi anggota. Activity diagram

dapat dilihat pada Gambar 4 dan Gambar 5.

Gambar 4 merupakan diagram alur proses aplikasi pada menu data

anggota yang dilakukan oleh administrator. Untuk melakukan proses yang ada

di menu data anggota administrator akan melakukan proses login terlebih

dahulu. Administrator harus memasukkan username dan password untuk

diarahkan oleh sistem ke dalam tampilan menu data anggota. Di dalam menu

data anggota terdapat aksi yang dapat dipilih oleh admin yaitu insert, update,

select dan delete.

Login Username &

Password

Pilih menu Data

Anggota

Pilih Aksi

Logout

Insert Update

Select Delete

Set Username &

Password

Tampil

Dashboard

Tampil Halaman

Data Anggota

Set hasil

Insert/Update/Select/Delete

Pengecekan Username &

Password

Simpan

Database

Apakah data valid?Tidak

Ya

start

end

DatabaseSistemAdmin

Gambar 4 Activity Diagram Administrator

12

Gambar 5 merupakan alur proses registrasi seseorang untuk menjadi

anggota Defender Shooting Club. Data yang diverifikasi dan memenuhi syarat

menjadi anggota Defender Shooting Club akan disimpan di database Defender

Shooting Club. Setelah data tersimpan maka anggota akan mendapat notifikasi

bahwa sudah menjadi anggota Defender Shooting Club melalui email.

Class diagram merupakan diagram yang membantu dalam visualisasi

struktur kelas-kelas dari suatu sistem. Class diagram mendeskripsikan jenis-

jenis objek dalam system dan berbagai macam hubungan statis yang terdapat

di antara mereka. Di dalam diagram ini, diperlihatkan hubungan antar kelas

dan penjelasan detail tiap -tiap kelas[8].

Gambar 5 Activity Diagram Registrasi Anggota

Gambar 6 Class Diagram Angggota

end

start

Insert Data

Pengecekan

Keanggotaan

Controller

Verifikasi Data

Notifikasi Email

Simpan

Database

Apakah data valid?

Tidak

Ya

DatabaseSistemUser

13

Gambar 6 merupakan class diagram yang digunakan dalam pembuatan

aplikasi. Gambar tersebut menunjukan struktur class MVC (Model View

Controller) Laravel dalam menu anggota pada aplikasi Defender Shooting

Club dan menunjukkan relasi antar class yang terdapat pada controller menu

anggota.

Pada perancangan antarmuka akan dijelaskan mock-up tentang aplikasi

yang akan dibuat. Pada Gambar 7 dan Gambar 8 adalah desain kasar pada

bagian awal aplikasi yang akan dirancang. Berikut adalah desain kasar aplikasi

untuk administrator Defender Shooting Club.

Gambar 7 merupakan desain utama aplikasi yang nantinya akan

menampilkan 7 menu yaitu menu dashboard, registrasi, data anggota, data unit

anggota, galeri, info dan struktur organisai Defender Shooting Club. Bagian

tengah adalah isi content dan judul content dimana administrator dapat melakukan

eksekusi data di dalam bagian content .

(3) Customer test drives mock-up, pada tahap ini dilakukan revisi dari prototype yang

telah dibuat. Selanjutnya klien (Defender Shooting Club) melakukan test drive

untuk meninjau prototype berdasarkan wawancara atau briefing yang dilakukan

sebelumnya. Hasil test drive ditunjukkan pada prototyping 2 tahap listen to

customer.

Prototyping 2

(1) Listen to customer. Pada tahap ini dilakukan briefing kedua dengan klien

(Defender Shooting Club). Penambahan fungsi dan fitur, yaitu: (a) notifikasi

kepada anggota jika masa aktif kartu tanda anggota telah habis dan notifikasi

bahwa kartu tanda anggota berhasil diperpanjang, (b) cetak kartu tanda anggota

dibagi berdasarkan cabang olahraga dan (c) pemilihan warna aplikasi yang

sederhana.

(2) Build / revise mock-up. Terdapat revisi dari hasil briefing kedua dengan klien

(Defender Shooting Club) sehingga menghasilkan prototype 2.

(3) Customer test drives mock-up. Hasil evaluasi oleh klien pada prototype 2

menunjukan bahwa aplikasi Defender Shooting Club sudah tidak ada penambahan

fitur lagi sehingga aplikasi siap untuk dikembangkan. Bahasa pemrograman yang

Gambar 7 Desain Halaman Administrator Aplikasi

Logo Option

Menu 1

Menu 2

Menu 3

Menu 4

Menu 5

Judul Content

Isi Content

14

dipakai dalam pengembangan adalah PHP dengan menggunakan framework

Laravel dan CSS framework Materialize untuk mempermudah tampilan.

Tahap selanjutnya yaitu pembangunan sistem dan pengujian sistem yang akan

dibahas pada bab hasil dan pembahasan.

4 Hasil dan Pembahasan

Hasil penelitian diimplementasikan menjadi aplikasi berbasis web yang

mampu mengelola penyampaian informasi, registrasi keanggotaan dan berhubungan

dengan pengdokumentasian data anggota Defender Shooting Club. Pembuatan

aplikasi menggunakan framework Laravel yang memudahkan programer dengan

konsep MVC (Model-View-Controller). Model berfungsi untuk mengatur tabel yang

digunakan pada modul dan relasinya terhadap tabel lain. View berfungsi untuk

menampilkan data berupa informasi kepengguna. Controller berfungsi untuk

menangani request dari route dan memprosesnya untuk kemudian mengirim respons

ke view. Laravel terdapat routing yang berguna untuk mengakses suatu halaman pada

aplikasi melalui URL[2]. Pada aplikasi ini routing dibuat pada file web.php yang

dapat dilihat pada Kode Program 1.

Kode Program 1 Routing Aplikasi

1 Route::get('/', function () { return view('user.usera');});

2 Route::get('/homea', function () { return view('templates.partials._homea');});

3 Auth::routes();

4 Route::get('/home', 'HomeController@index')->name('home'); 5 Route::resource('homea', 'HomeaController'); 6 Route::get('homea', 'HomeaController@index')->name('homea'); 7 Route::get('api/homea', 'HomeaController@apiHomea')->name('api.homea'); 8 Route::get('api/homeau', 'HomeaController@apiHomeau')->name('api.homeau'); 9 Route::get('homea', 'HomeaController@showuser')->name('homea'); 10 Route::resource('registrasi', 'RegistrasiController'); 11 Route::get('registrasi', 'RegistrasiController@index')->name('registrasi'); 12 Route::resource('anggota', 'AnggotaController'); 13 Route::get('anggota', 'AnggotaController@index')->name('anggota'); 14 Route::get('api/anggota', 'AnggotaController@apiAnggota')->name('api.anggota'); 15 Route::get('export', 'AnggotaController@anggotaExport')->name('anggota.export'); 16 Route::post('import', 'AnggotaController@anggotaImport')->name('anggota.import'); 17 Route::post('downloadPDF', 'AnggotaController@downloadPDF')->name('downloadPDF'); 18 Route::resource('dataasg', 'DataasgController'); 19 Route::get('dataasg', 'DataasgController@index')->name('dataasg'); 20 Route::get('api/dataasg', 'DataasgController@apiDataasg')->name('api.dataasg'); 21 Route::get('ex', 'DataasgController@dataasgEx')->name('dataasg.ex'); 22 Route::post('im', 'DataasgController@dataasgIm')->name('dataasg.im'); 23 Route::resource('galeri', 'GaleriController'); 24 Route::get('galeri', 'GaleriController@index')->name('galeri'); 25 Route::get('api/galeri', 'GaleriController@apiGaleri')->name('api.galeri'); 26 Route::resource('info', 'InfoController'); 27 Route::get('info', 'InfoController@index')->name('info'); 28 Route::get('api/info', 'InfoController@apiInfo')->name('api.info'); 29 Route::resource('struktur', 'StrukturController'); 30 Route::get('struktur', 'StrukturController@index')->name('struktur'); 31 Route::get('api/struktur', 'StrukturController@apiStruktur')->name('api.struktur'); 32 Route::get('usera', 'InfoController@indexusera')->name('usera'); 33 Route::get('dschome', 'InfoController@indexhome')->name('dschome'); 34 Route::get('dscinfo', 'InfoController@indexuser')->name('dscinfo'); 35 Route::get('dscinfo', 'InfoController@showuser')->name('dscinfo'); 36 Route::get('dscregistrasi','InfoController@indexregistrasi')->name('dscregistrasi'); 37 Route::post('dscregistrasi', 'RegistrasiController@store'); 38 Route::get('dscgaleri', 'GaleriController@indexuser')->name('dscgaleri'); 39 Route::get('dscgaleri', 'GaleriController@showuser')->name('dscgaleri'); 40 Route::resource('dscanggota', 'DscanggotaController');

15

41 Route::get('dscanggota', 'DscanggotaController@index')->name('dscanggota'); 42 Route::get('api/dscang', 'DscanggotaController@apiDscang')->name('api.dscang'); 43 Route::get('api/dscdat', 'DscanggotaController@apiDscdat')->name('api.dscdat'); 44 Route::get('dscpengurus', 'StrukturController@indexuser')->name('dscpengurus'); 45 Route::get('dscpengurus', 'StrukturController@showuser')->name('dscpengurus');

Kode Program 1 merupakan routing aplikasi dimana menangani request di

URL kemudian mengarahkan aplikasi untuk memanggil halaman atau resource.

Routing digunakan untuk mengatur URL mana yang boleh dan tidak boleh diakses

oleh pengguna. Dalam routing mengenal yaitu GET dan POST, Laravel GET

digunakan untuk menampilkan resource yang bisa berupa fungsi atau controller.

Sedangkan POST pada Laravel digunakan untuk mengarahkan form ketika melakukan

submit.

Kode Program 1 baris 1-3 menunjukkan route yang dipakai dalam mengakses

halaman awal pada administrator dan halaman awal pada aplikasi. Baris 4-31

menunjukkan route yang dipakai dalam menampilkan resource dan mengarahkan

form pada halaman administrator. Baris 31-45 menunjukkan route dalam mengakses

resource dan form pengguna. Tampilan halaman yang diakses untuk melakukan

registrasi oleh masyarakat ditunjukkan pada Gambar 8.

Pada halaman ini terdapat petunjuk dan form yang harus diisi oleh masyarakat

untuk menjadi anggota. Form diisi dengan data lengkap seperti halnya kartu tanda

penduduk dan menggunakan huruf kapital. Jika data sudah dimasukan dengan benar

dan melanjutkan proses registrasi maka masyarakat tinggal klik registrasi. Berikut

akan dijelaskan kode program untuk melakukan registrasi anggota Defender Shooting

Club pada Kode Program 2.

Kode Prorgram 2 Model Registrasi Anggota 1. use Illuminate\Database\Eloquent\Model; 2. class Registrasi extends Model 3. {protected $fillable = ['nik', 'nama', 'ttl', 'alamat', 'pekerjaan', 'foto',

'reg', 'emailu', 'email'];}

Gambar 8 Form Registrasi Anggota

16

Pada Kode Program 2 merupkan model pada registrasi anggota yang berguna

untuk memasukkan data kedalam database registrasi yang sudah disediakan. Pada

baris 3 merupakan atribut fillable yang berguna untuk memilih data yang bisa

disimpan kedalam database. Kemudian terdapat fungsi pada controller registrasi yang

berguna untuk menerima data yang akan dimasukkan pada database registrasi yang

sudah disediakan. Berikut akan dijelaskan kode program pada controller registrasi

anggota pada Kode Program 3.

Kode Program 3 Controller Registrasi Anggota 1. public function store(Request $request){ 2. $email = "dsc@gmail.com"; 3. $input = $request->all(); 4. $input['foto'] = null; 5. if ($request->hasFile('foto')){ 6. $input['foto']='/upload/data/'.str_slug($input['nama'],'- 7. ').'.'.$request->foto->getClientOriginalExtension(); 8. $request->foto->move(public_path('/upload/data/'), $input['foto']); 9. } 10. if (Registrasi::create($input)) { 11. Mail::to($email)->send(new OrderShippeda($email)); 12. } 13. return redirect()->route('dscregistrasi')->with('success',

'Data berhasil dikirim, tunggu administrasi untuk memverifikasi data !');

14. }

Kode Program 3 merupakan kode program yang ada pada controller dari

registrasi anggota. Pada baris 4-10 merupakan variabel data yang berguna untuk

menampung data calon anggota. Pada baris 11-12 merupakan fungsi untuk notifikasi

kepada administrator yang dikirim melalui email bahwa ada calon anggota yang

sedang melakukan proses registrasi. Pada baris 13-14 merupakan notifikasi yang

diberikan kepada calon anggota bahwa data yang dikirim berhasil disimpan dan

diterima oleh administrator Defender Shooting Club. Pada Gambar 9 merupakan

halaman administrator yang menampilkan data yang berhasil dikirim oleh masyarakat

dari form registrasi anggota.

Pada Gambar 9 menampilkan data calon anggota yang berhasil dikirim

melalui form registrasi seperti nomor induk kependudukan, nama, alamat, nomor

registrasi unit jika sudah mempunyai unit tembak dan email. Berikut akan dijelaskan

Gambar 9 Tampilan Data Calon Anggota

17

kode program untuk verifikasi data anggota Defender Shooting Club pada Kode

Program 4.

Kode Program 4 Controller Verifikasi Data 1. public function store(Request $request) 2. { 3. $input = $request->all(); 4. $input['photo'] = null;

5. if ($request->hasFile('photo')){ 6. $input['photo'] = '/upload/photo/'.str_slug($input['nama'], 7. '-').'.'.$request->photo->getClientOriginalExtension(); 8. $request->photo->move(public_path('/upload/photo/'), $input['photo']); 9. }

10. if (Anggota::create($input)) { 11. Mail::to($request)->send(new OrderShipped($request)); 12. }

13. return response()->json([ 14. 'success' => true, 15. 'message' => 'Anggota Created' 16. ]); 17. }

Pada Kode Program 4 merupakan function store yang berguna untuk proses

penyimpanan data kedalam database yang sudah disediakan. Pada baris 3 merupakan

variabel data dari data yang sudah tersimpan pada data calon anggota. Pada baris 5-9

digunakan untuk lokasi penyimpanan foto dari calon anggota. Pada baris 10-12

merupakan respon jika data berhasil menjadi anggota maka secara otomatis akan

mengirimkan notifikasi kepada anggota baru. Pada Gambar 10 merupakan salah satu

contoh notifikasi yang ada pada aplikasi Defender Shooting Club.

Gambar 10 notifikasi yang dikirim kepada anggota yang berhasil melakukan

registrasi melalui email. Pada aplikasi Defender Shooting Club menggunakan

mailtrap yang merupakan layanan SMTP untuk membantu dalam melakukan testing

pengiriman email. Dengan adanya mailtrap testing pengiriman email tidak

membutuhkan mailbox sungguhan, cukup mengatur mailtrap sebagai SMTP server

maka semua email yang terkirim akan masuk ke mailbox mailtrap. Pada notifikasi

terdapat informasi bahwa berhasil menjadi anggota dan data anggota dapat dilihat

Gambar 10 Notifikasi Email

18

dengan cara klik button Defender Shooting Club. Berikut akan dijelaskan kode

program untuk notifikasi anggota Defender Shooting Club pada Kode Program 5.

Kode Program 5 Notifikasi Email 1. if (Anggota::create($input)) { 2. Mail::to($request)->send(new OrderShipped($request)); 3. }

Kode Program 5 pada baris 1-3 digunakan jika data berhasil disimpan maka

akan mengirimkan notifikasi melalui email. Pada fungsi ini akan secara otomatis

mencari field email yang sudah ada untuk dikirimkan notifikasi. Notifikasi yang

dikirimkan berupa template email berbentuk HTML yang dijelaskan pada Kode

Program 6.

Kode Program 6 Template Notifikasi Email 1. @component('mail::message') 2. # Verifikasi Calon Anggota DSC

3. @component('mail::button',['url'=>'http://defender/public/registrasi']) 4. VERIFIKASI 5. @endcomponent

6. Thanks,
7. {{ config('app.name') }} 8. @endcomponent

Kode Program 6 merupakan template email berbentuk HTML yang dikirmkan

kepada anggota baru. Pada baris 3 terdapat component yang berisi button yang

berfungsi untuk memindahkan halaman email anggota ke halaman aplikasi Defender

Shooting Club. Pada Gambar 11 merupakan tampilan data anggota Defender Shooting

Club. Pada halaman ini terdapat fitur yang bisa digunakan oleh administrator seperti

cetak kartu anggota, ekspor impor data kedalam format excel dan hapus data anggota.

Data anggota yang sudah tersimpan akan dicetak kartu tanda anggota oleh

administrator dengan menggunakan fitur cetak kartu. Administrator akan memilih

terlebih dahulu data yang akan dicetak. Administrator dapat mencetak kartu tanda

Gambar 11 Tampilan Data Anggota

19

anggota lebih dari satu walaupun berbeda cabang yaitu tembak target, tembak reaksi

dan berburu. seperti ditunjukkan pada Gambar 12.

Pada Gambar 12 merupakan kartu tanda anggota yang wajib dimiliki oleh

setiap anggota Defender Shooting Club. Kartu tanda anggota merupakan tanda bahwa

seseorang telah menjadi anggota dan di kartu tersebut terdapat informasi seperti

nomor induk kependudukan, nama, alamat dan masa berlaku anggota Defender

Shooting Club. Untuk kode program pembuatan kartu tanda anggota dapat dilihat

pada Kode Program 7.

Kode Program 7 Cetak Kartu Anggota

1. public function downloadPDF(Request $request){ 2. $dataanggota = array(); 3. $id = $request ['id']; 4. $jenisAG2 = Anggota::whereIn('id', $id); 5. $jenisAR2 = Anggota::whereIn('id', $id); 6. $jenisASG2 = Anggota::whereIn('id', $id); 7. 8. if ($jenisAG2->where('kta','like','%AG%')!=NULL) { 9. //$dataanggota2 = $dataanggota->get(); 10. $fotoAG = "images/api.png";} 11. if ($jenisAR2->where('kta','like','%AR%')!=NULL) { 12. //$dataanggota2 = $dataanggota->get(); 13. $fotoAR = "images/apii.png";} 14. if ($jenisASG2->where('kta','like','%ASG%')!=NULL) { 15. //$dataanggota2 = $dataanggota->get(); 16. $fotoASG = "images/apiii.png";} 17. $jenisAG = $jenisAG2->get(); 18. $jenisAR = $jenisAR2->get(); 19. $jenisASG = $jenisASG2->get(); 20. 21. $pdf=PDF::loadView('templates.partials._agpdfView', compact 22. ('jenisAG','jenisAR', 'jenisASG', 'fotoAG','fotoAR', 'fotoASG')); 23. $pdf->setPaper(array(0,0,566.93,850.39),'potrait')->setWarnings(false); 24. 25. return $pdf->stream();

Kode Program 7 merupakan function yang berguna untuk mencetak kartu

tanda anggota seperti pada Gambar 12. Pada baris 2-6 merupakan variabel yang

berguna untuk menampung data yang diambil dari data anggota. Setelah data dipilih

maka data akan disortir berdasarkan jenis seperti pada baris 8-19. Pada baris 24-27

Gambar 12 Cetak Kartu Anggota

20

merupakan fungsi untuk mengakses view yang akan dijadikan pdf. Berikut adalah

hasil pengujian modul administrator berbasis web yang dapat dilihat pada Tabel 1.

Tabel 1 Hasil Pengujian Administrator

Fungsi yang diuji Kondisi Output yang

diharapkan

Output yang

dihasilkan sistem

Status Pengujian

Login

Username dan

password benar

Sukses login Sukses login

Valid

Username dan

password salah

Gagal login Gagal login

Verifikasi Data

Form diisi dengan

benar

Sukses tambah data

dan mengirimkan

notifikasi

Sukses tambah data

dan mengirimkan

notifikasi

Valid

Edit Anggota Form diisi dengan

benar

Sukses ubah data

dan mengirimkan

notifikasi

Sukses ubah data

dan mengirimkan

notifikasi

Valid

Hapus Anggota Konfirmasi dengan

benar

Sukses hapus data Sukses hapus data Valid

Cetak Kartu

Anggota

Pilih data dengan

benar

Sukses mencetak

kartu dengan format

pdf

Sukses mencetak

kartu dengan format

pdf

Valid

Perpanjang Masa

Berlaku

Verifikasi data Sukses perpanjang

dan mengirimkan

notifikasi

Sukses perpanjang

dan mengirimkan

notifikasi

Valid

Berdasarkan Tabel 1 terlihat bahwa hasil pengujian yang dilakukan terkait

proses teknis administrator pada aplikasi Defender Shooting Club menunjukkan

bahwa tidak terdapat masalah pada semua proses pengujian dengan status pengujian

valid. Berikut adalah hasil pengujian modul registrasi anggota yang dapat dilihat pada

Tabel 2.

Tabel 2 Hasil Pengujian Registrasi Anggota

Fungsi yang diuji Kondisi Output yang

diharapkan

Output yang

dihasilkan sistem

Status Pengujian

Menampilkan

landing page

Membuka landing

page oleh pengguna

Sukses tampilkan

halaman

Sukses tampilkan

halaman

Valid

Menampilkan

halaman registrasi

Membuka halaman

registrasi

Sukses tampilkan

halaman dan cara

registrasi

Sukses tampilkan

halaman dan cara

registrasi

Valid

Registrasi anggota Form diisi dengan

benar

Sukses

menambahkan data

Sukses

menambahkan data

Valid

Verifikasi data Notifikasi Menerima notifikasi

melalui email

Menerima notifikasi

melalui email

Valid

Cek data anggota Mengisi id atau

nama dengan benar

Sukses

menampilkan data

anggota

Sukses

menampilkan data

anggota

Valid

Berdasarkan Tabel 2 terlihat bahwa hasil pengujian yang dilakukan terkait

proses teknis registrasi anggota pada aplikasi Defender Shooting Club menunjukkan

bahwa tidak terdapat masalah pada semua proses pengujian dengan status pengujian

valid. Hasil ini memperlihatkan bahwa antara proses perancangan yang dilakukan dan

hasil implementasi tidak mengalami perbedaan dan sesuai dengan yang diharapkan.

Adapun pengujian yang dilakukan dengan melibatkan anggota serta pengguna

aplikasi dengan mengisi kuisioner pada Tabel 3.

21

Tabel 3 Hasil Pengujian Pengguna No Pertanyaan STS TS R S SS

1 Tampilan dan huruf dapat dilihat dengan jelas 0 1 3 1 15

2 Menu atau fitur aplikasi mudah digunakan 0 0 5 2 13

3 Membantu memperoleh informasi seputar keanggotaan

Defender Shooting Club 0 4 0 2 14

4 Membantu efisiensi proses dalam melakukan registrasi anggota 0 0 1 7 12

Tabel 3 menunjukkan hasil pernyataan pengguna pada pengujian aplikasi

Defender Shooting Club. Jawaban yang disediakan diantaranya: STS = Sangat Tidak

Setuju, TS = Tidak Setuju, R = Ragu-ragu, S = Setuju dan SS = Sangat Setuju. Untuk

mengukur presentase perhitungan menggunakan skala likert. Nilai presentase yang

dibutuhkan diantaranya: 0% - 19,99% = STS, 20% - 39,99% = TS, 40% - 59,99% =

R, 60% - 79,99% = S, dan 80% - 100% = SS yang dapat dilihat pada Tabel 4.

Tabel 4 Hasil Perhitungan Menggunakan Skala Likert

No Pertanyaan Jumlaah %

1 Tampilan dan huruf dapat dilihat dengan jelas 20 90%

2 Menu atau fitur aplikasi mudah digunakan 20 88%

3 Membantu memperoleh informasi seputar keanggotaan Defender

Shooting Club 20 86%

4 Membantu efisiensi proses dalam melakukan registrasi anggota 20 91%

Berdasarkan hasil pengujian diatas, dapat disimpulkan bahwa tampilan dan

huruf aplikasi Defender Shooting Club dapat dilihat dengan jelas karena responden

menjawab sangat setuju pada pertanyaan 1. Kesimpulan bahwa menu atau fitur pada

aplikasi mudah digunakan karena responden menjawab sangat setuju pada pertanyaan

2. Kesimpulan bahwa aplikasi sangat membantu anggota atau masyarakat dalam

memperoleh informasi keanggotaan karena responden menjawab sangat setuju pada

pertanyaan 3. Kesimpulan yang terakhir memperlihatkan bahwa aplikasi membantu

masyarakat dalam melakukan registrasi anggota karena responden menjawab sangat

setuju pada pertanyaan 4. Hasil ini memperlihatkan bahwa proses perancangan yang

dilakukan sudah sesuai dengan yang diharapkan oleh pengguna.

5 Kesimpulan

Berdasarkan penelitian yang dilakukan, aplikasi Defender Shooting Club

berbasis web telah berhasil dibangun menggunakan bahasa pemrograman PHP dengan framework Laravel. Penggunaan framework Laravel dapat membantu

pembangunan website dengan efisien karena fitur dan kelas-kelas yang telah

disediakan. Laravel yang berbasis MVC membuat proses penulisan kode program

lebih cepat dan terstruktur. Aplikasi ini mendukung penyampaian informasi yang ada

di Defender Shooting Club, registrasi keanggotaan dan berhubungan dengan

pengdokumentasian data anggota. Terdapat fitur yang ada pada aplikasi yaitu

notifikasi kepada masyarakat yang berhasil menjadi anggota dan notifikasi masa

berlaku kartu tanda anggota yang sudah habis atau berhasil diperpanjang melalui

email.

Untuk penelitian selanjutnya, aplikasi Defender Shooting Club berbasis web

dapat dikembangkan dengan menambahkan fitur penjualan senapan angin ataupun

airsoftgun sehingga mempermudah anggota atau masyarakat dalam proses membeli

senapan angin. Pengembangan aplikasi Defender Shooting Club berbasis android juga

dapat dibangun.

22

6 Daftar Pustaka

[1] Defender Shooting Club. Profile Defender Shooting Club.

http://www.defendersc.com/. Diakses 2 April 2018.

[2] Rohi, A. 2017. Membuat Aplikasi Point of Sale dengan Laravel dan AJAX. Jakarta

: PT Flex Media Komputindo.

[3] Dede, H & Prada. 2010. Sistem Informasi Manajemen Keanggotaan Pada Sekolah

Tinggi Manajemen Informatika dan Komputer Kopma UGM Berbasis Web.

Yogyakarta : Amikom.

[4] Henny Hendarti & Karim Haryanto. 2009. Analisis dan Perancangan Sistem

Informasi Registrasi dan Keanggotaan Klub. Yogyakarta : Universitas Bina

Nusantara.

[5] Al-Bahra bin Ladjamudin. 2005. Analisis dan Desain Sistem Informasi.

Yogyakarta : Graha Ilmu.

[6] Stauffer, M. 2017. Laravel: Up and Running. Amerika Serikat : O’Reilly Media,

Inc.

[7] https://laravel.com/. Diakses 5 January 2018.

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

Serikat : R.S. Pressman and Associates

[9] UML 1.3a 1pharR S, Object Management Group Inc , March 1999.

[10] Nugroho, A. 2010, Mengembangkan Aplikasi Basis Data Menggunakan C# + SQL

Server. Yogyakarta : Andi Offset.

http://www.defendersc.com/https://laravel.com/