Pengembangan Website Keanggotaan PERBAKIN (Persatuan Tembak Menembak Indonesia) menggunakan Framework Laravel (Studi Kasus : Defender Shooting Club

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

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

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 Anggota _{Hapus Data Anggota}

Anggota Cek Keanggotaan Registrasi Anggota Masyarakat Tambah Galeri Edit Galeri Hapus Galeri Tambah Info Edit Info Hapus Info Data Unit <<extend>> <<extend>> <<extend>> Verifikasi <<include>> Data Anggota <<include>> <<extend>> <<extend>> <<extend>> Galeri <<extend>> <<extend>> Info <<extend>> <<extend>> <<extend>> Struktur Administrator Tambah Struktu Edit Struktur Hapus Struktur <<extend>> <<extend>> <<extend>> <<extend>>

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 Database Sistem Admin

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

Database Sistem

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'];}

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

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

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,<br> 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

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

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.