JURTEKSI (Jurnal Teknologi dan Sistem Informas. ISSN 2407-1811 (Prin. Vol. VII No. Dec 2020, hlm. 15 Ae 22 ISSN 2550-0201 (Onlin. DOI: https://doi. org/10. 33330/jurteksi. Available online at http://jurnal. id/index. php/jurteksi RANCANG BANGUN APLIKASI PRESENSI MULTI EVENT DENGAN QRCODE BERBASIS RESTFUL WEB SERVICE Fandy Indra Pratama1*. Mustagfirin1. Ardian Fachreza1 Teknik Informatika. Universitas Wahid Hasyim email: fandy@unwahas. Abstract: Activities in the world of education and institutions are documents that must be documented which can be used as activity reports to the leadership. One such documentation is attendance documentation because attendance is sometimes very sensitive because it affects the prerequisites for further activities. Meanwhile, most attendance systems currently use conventional methods, namely printing attendance forms and participants taking notes on the form. After completion of the event, it is recorded in an electronic storage and the original sheet is archived. Meanwhile, universities and schools are required to be sensitive to technology so that they are not out of date. So the researchers proposed a presence system based on Scan Id QR Code based on Restful Web Service technology with the following process: . Schedule 1 time in advance. attendance by scanning the QR-Code ID to a scanner. Attendance monitoring. This proposed technology can be used for multi-platform and multi-event, so that to use this presence system, each agency can list its activities and its members. And as a member, you can do attendance by just scanning the QR-Code Id you have into a scanner. The development of this system uses the web engineering method because this method is appropriate for developing this system. So that the system is deemed capable of trimming the administration of the committee and minimizing the problem of data fraud and corruption. Keywords: presence, qr-code, web engineering Abstrak: Kegiatan pada dunia pendidikan dan instansi merupakan dokumen yang wajib didokumentasikan yang dapat digunakan sebagai laporan kegiatan ke pimpinan. Salah satu dokumentasi tersebut adalah dokumentasi presensi kehadiran karena presensi kehadiran terkadang sangat sensitif karena mempengaruhi prasyarat kegiatan selanjutnya. Sedangkan hampir besar sistem presensi saat ini menggunakan cara konvensional yaitu cetak formulir presensi dan peserta mencatat di formulir tersebut. Setelah selesai acara, dicatat di penyimpanan elektronik dan lembar aslinya diarsipkan. Sedangkan universitas dan sekolah dituntut peka terhadap teknologi agar tidak ketinggalan zaman. Sehingga peneliti mengusulkan sistem presensi berbasis dengan Scan Id qr-code berbasis teknologi Restful Web Service dengan proses sebagai berikut: . Jadwal 1 kali diawal. Presensi dengan cara scan Id qr-code ke mesin . Pemantauan kehadiran. Teknologi yang diusulkan ini dapat digunakan untuk multi platform dan multi event, sehingga untuk menggunakan sistem presensi ini, setiap instansi dapat membuat daftar kegiatan dan anggotanya masing-masing. Serta sebagai anggota dapat melakukan presensi hanya melakukan scan Id qr-code yang dimiliki ke mesin scanner. Pengembangan sistem ini menggunakan metode web engineering karena metode tersebut tepat untuk mengembangkan sistem ini. Sehingga sistem tersebut dirasa mampu memangkas administrasi panitia dan memperkecil permasalahan kecurangan dan rusaknya data. Kata kunci: presensi, qr-code, web engineering JURTEKSI (Jurnal Teknologi dan Sistem Informas. ISSN 2407-1811 (Prin. Vol. VII No. Dec 2020, hlm. 15 Ae 22 ISSN 2550-0201 (Onlin. DOI: https://doi. org/10. 33330/jurteksi. Available online at http://jurnal. id/index. php/jurteksi Sudah terdapat beberapa sistem presensi berbasis elektronik antara lain adalah presensi menggunakan alat sidik jari dan sistem presensi berbasis Presensi menggunakan alat sidik jari seperti yang dihasilkan penelitian . memberikan penyelesaian masalah hanya untuk satu kegiatan, namun penelitian tersebut tidak bisa digunakan dengan kegiatan yang jumlahnya banyak serta hasil penelitian tersebut tidak memiliki validasi batasan Penelitian . memanfaatkan alat sidik jari untuk perbedaannya dengan . adalah pelaporannya menggunakan aplikasi berbasis android, sehingga siswa dan orang tua dapat melihat presensi siswa mengunakan aplikasi presensi yang Namun penelitian . memiliki kendala yaitu hanya dapat melakukan presensi pada alat sidik jari yang disediakan, kendala lain adalah tidak dapat melakukan presensi ketika terdapat kebijakan belajar dari rumah atau belajar yang tidak mengharuskan dilingkungan institusi, sehingga dengan terfikirkan sebelumnya tidak bisa terselesaikan dengan sistem presensi Penelitian . membuat aplikasi presensi berbasis android dengan memanfaatkan RESTful Web Service untuk mengirimkan data presensi disaat area tersebut tidak tersedia jaringan internet / internet tidak Sehingga RESTful Web Service tersebut mampu memberikan pelayanan transaksi data yang lebih kecil dibandingkan sistem yang tidak menggunakan RESTful Web Service. RESTful Web Service sangat ampuh untuk memecahkan berbagai software dan masalah integrasi data di pusat kontrol . , . Selain itu web service PENDAHULUAN Pesatnya perkembangan teknologi internet tidak ada batasan lagi orang untuk membuat atau mengambil informasi dengan cepat. Mudahnya mengakses internet dapat mempermudah seseorang untuk menyelesaikan tujuannya dan menunjang kegiatannya untuk mencari informasi, chatting, hingga bermain game. Teknologi internet sudah membuat sebagian orang berinisiatif untuk membuat produk yang dapat mempermudah menyelesaikan Inovasi teknologi internet antara lain adalah pemasaran produk, informasi akademik yang meliputi profil instansi, guru, karyawan, siswa/ mahasiswa dan yang lainnya. Kegiatan pada dunia pendidikan dan instansi wajib didokumentasikan yang nantinya dapat digunakan sebagai laporan kegiatan ke pimpinan, selain itu bahkan dapat digunakan sebagai history yang dapat dilihat kembali kapan saja jika data masih tersimpan. Salah satu dokumentasi yang wajib tersedia adalah dokumentasi presensi kehadiran karena presensi kehadiran terkadang sangat sensitif karena presensi mempengaruhi Sedangkan hampir besar sistem presensi yang digunakan kegiatan siswa dan mahasiswa saat ini menggunakan cara konvensional yaitu selalu cetak dan presensi formulir dengan manual. Setelah acara selesai kemudian dicatat pada penyimpanan elektronik dan lembar aslinya diarsipkan. Cara-cara tersebutlah yang terjadi pada beberapa sekolah, universitas dan kantor yang selanjutnya disebut institusi pada setiap kegiatan pembelajarannya. Sedangkan teknologi agar tidak ketinggalan zaman dan fast respons. JURTEKSI (Jurnal Teknologi dan Sistem Informas. ISSN 2407-1811 (Prin. Vol. VII No. Dec 2020, hlm. 15 Ae 22 ISSN 2550-0201 (Onlin. DOI: https://doi. org/10. 33330/jurteksi. Available online at http://jurnal. id/index. php/jurteksi menawarkan keuntungan mengurangi biaya integrasi dan meningkatkan kecepatan integrasi . Berdasarkan hasil penelitian sebelumnya, peneliti mengusulkan membuat sistem presensi menggunakan Qr Code yang berbasis RESTful Web Service yang dapat digunakan presensi dengan multi kegiatan dan dapat melakukan presensi diluar area institusi. Usulan ini dikembangkan dengan sistem responsive dapat diakses pada semua gadget dengan memperhatikan estetika tampilan, validasi waktu presentasi serta mengatasi kecurangan titip presensi. Sehingga sistem yang dihasilkan sistem yang dapat digunakan presensi pada multi institusi dan multi kegiatan hanya menggunakan satu sistem. Pengumpulan Data Sekunder Pengumpulan data sekunder melalui studi kepustakaan, yaitu teknik mempelajari beberapa dokumen . ata surve. , literatur, atau file-file yang berhubungan dengan penelitian yang Metode Pengembangan Sistem Metode pengembangan sistem yang digunakan pada penelitian ini Web engineering merupakan model yang untuk mengembangkan aplikasi berbasis web. Web engineering menyeluruh yang melibatkan semua aspek pengembangan aplikasi berbasis web, mulai dari konsep, pengembangan, implementasi, evaluasi performa, dan maintenance secara terus-menerus . Web engineering adalah suatu proses yang digunakan untuk membuat aplikasi web yang berkualitas tinggi . METODE Metode Penelitian menggunakan metode-metode yang diterapkan tahap demi tahap, yang Metode Pengumpulan Data Metode pengumpulan data yang digunakan dalam penelitian ini terbagi atas dua bagian yaitu pengumpulan data primer dan pengumpulan data sekunder. Pengumpulan Data Primer Pengumpulan data primer yaitu Teknik wawancara yaitu suatu teknik pengumpulan data yang dilakukan dengan cara mengajukan pertanyaan secara langsung kepada beberapa pengguna tentang kebutuhan sistem yang fleksibel, aman dan mudah Gambar 1. Tahapan Web Engineering. Berikut adalah aktivitas-aktivitas pada model web engineering : Costumer Communication Tahap ini meliputi 2 task, yaitu: Business analysis, mendefinisikan hal-hal apa saja yang JURTEKSI (Jurnal Teknologi dan Sistem Informas. ISSN 2407-1811 (Prin. Vol. VII No. Dec 2020, hlm. 15 Ae 22 ISSN 2550-0201 (Onlin. DOI: https://doi. org/10. 33330/jurteksi. Available online at http://jurnal. id/index. php/jurteksi akan termuat di dalam sistem presensi menggunakan Id QR Code termasuk menentukan penggunanya, databasenya, serta integrasi antara sistem dan proses Perumusan, pengumpulan sampel informasi mengenai hal-hal apa saja yang akan ada di sistem presensi menggunakan Id QR Code pengambilan wawancara dengan Staff Administrasi Fakultas Teknik Universitas Wahid Hasyim Semarang dan Guru SD Negeri 1 Gulang Kudus. Hasil dari aktivitas ini yaitu informasi-informasi tentang proses absensi yang berjalan dan harapan yang akan dimuat pada Planning Selanjutnya adalah planning, tahap ini merupakan tahap perencanaan yang terdiri dari pendefinian tugas dan target waktu dari tugas yang sudah ditentukan dalam membangun sistem presensi menggunakan Id QR Code. Modelling Tahap ini menjelasan hal-hal apa saja yang diperlukan sistem presensi menggunakan Id QR Code. Analisis Model - Analisis Isi, melakukan analisa kebutuhan dari sistem presensi menggunakan Id QR Code . - Analisis Interaksi, menganalisa dengan sistem berdasarkan hak akses pengguna terhadap sistem. - Analisis Fungsional, menganalisa dengan mengidentifikasi proses-proses yang terpisah dengan sistem tetapi bagi user mengidentifiksai operasi-operasi yang akan dijalankan. - Analisa konfigurasi, identifikasi lingkungan yang tepat untuk sistem presensi menggunakan Id QR Code. Hasil dari aktivitas ini yaitu informasiinformasi yang akan dimuat pada sistem Design Modelling Ada beberapa tahap dilakukan dalam proses design modelling, yaitu: - Desain Antarmuka, merupakan antarmuka web untuk sistem presensi menggunakan Id QR Code. - Desain Estetika, merupakan proses merancang tampilan untuk halaman web dan aplikasi mobile dengan warna yang di kombinasikan dengan gambar dan text. - Desain Isi, adalah proses perancangan isi dari sistem presensi yang akan di buat. Desain isi dibuat berdasarkan kebutuhan yang sudah di kumpulkan pada tahap analisa. - Desain Navigasi, adalah tahap pemberian hak otorisasi atau hak akses untuk pengguna sistem presensi menggunakan Id QR Code. - Desain Arsitektur, merupakan dengan tujuan dari pembuatan sistem presensi menggunakan Id QR Code, konten yang ada di JURTEKSI (Jurnal Teknologi dan Sistem Informas. ISSN 2407-1811 (Prin. Vol. VII No. Dec 2020, hlm. 15 Ae 22 ISSN 2550-0201 (Onlin. DOI: https://doi. org/10. 33330/jurteksi. Available online at http://jurnal. id/index. php/jurteksi Contruction Dalam Code berkembang dan populer saat ini, dan juga menggunakan tool sesuai dengan kebutuhan. Dalam tahap ini ada 2 proses, yaitu: Implementasi, merupakan proses penulisan kode program untuk membangun API, dan web. Bahasa digunakan untuk membuat API dan web adalah PHP dengan kerangka kerja laravel . Pada sisi client menggunakan javascript dengan kerangka kerja Angularjs. Pengujian, adalah tahap untuk terjadinya kesalahan pada presensi menggunakan Id QR Code. Pengujian tidak hanya dilakukan dengan metode blackbox, tetapi juga berdasarkan UAT yaitu user acceptance test. Delivery dan Feedback Dalam tahap ini user memberikan respon dan umpan balik berupa masukan-masukan kepada pihak pengembang aplikasi agar bisa Arsitektur Restful Web Service Gambar 2. Arsitektur Restful Web Service Berdasarkan arsitekturnya, rest menyediakan resource yang bisa diakses oleh client. Client dapat berbagai platform seperti website, dekstop, atau mobile app. Bukan hanya pengembang sendiri yang dapat menggunakan rest, namun pengembang lain dapat juga mengakses informasi dari server jika diperlukan. Agar pengembang lain dapat mengakses rest, client membutuhkan token atau kunci mengidentifikasi setiap user. Sehingga token berfungsi sebagai otorisasi untuk informasi-informasi yang disiapkan server. Setiap client melakukan request, client harus menyertakan token pada HTTP Header sebagai identitas bahwa client tersebut adalah pengguna yang Meskipun begitu, token memiliki masa berlaku. Jika masa berlaku token menyertakan token pada HTTP Header maka rest akan mengembalikan response dengan kode 401 yaitu Unauthorized. Server side yang digunakan pada penelitian ini menggunakan framework laravel yang mana kerangka kerja laravel mudah dipahami dan kuat. HASIL DAN PEMBAHASAN Hasil yang telah dicapai sampai saat ini yaitu tahap perancangan sistem, dimulai dari analisa kebutuhan sistem yang terdiri dari: konten, interaksi, fungsional dan konfigurasi. Perancangan arsitektur, antarmuka, konten, dan JURTEKSI (Jurnal Teknologi dan Sistem Informas. ISSN 2407-1811 (Prin. Vol. VII No. Dec 2020, hlm. 15 Ae 22 ISSN 2550-0201 (Onlin. DOI: https://doi. org/10. 33330/jurteksi. Available online at http://jurnal. id/index. php/jurteksi kerangka itu sendiri menyediakan otentikasi, route, session, caching, migration dan lainnya yang diberikan untuk pengembang membangun aplikasi berbasis web yang komplek . Pada laravel tersebut sudah disediakan fitur yang berbasis web secara langsung dan berbasis resfull yaitu menggunakan teknologi API. API (Application Programmable Interfac. sekumpulan perintah, fungsi, serta protokol yang dapat digunakan oleh programmer saat membangun perangkat lunak untuk sistem operasi tertentu. API merupakan perantara perangkat lunak yang memungkinkan dua aplikasi saling berkomunikasi . Client-side yang digunakan pada penelitian ini menggunakan framework AngularJs yang amana framework tersebut juga menggunakan metode MVC seperti framework Laravel. Kelebihan dari framework ini yaitu dapat melakukan data binding antara model dan controller sehingga dapat tersinkron secara asynchronous . Qr Code dengan Id Card Gambar 3. Usecase Diagram Implementasi Sistem Berdasarkan hasil perancangan sistemnya yang mulai dari usecase diimplemantasikan ke bentuk koding dan dapat dijlankan pada browser sehingga dapat dilakukan pengujian oleh developer dan user. Berikut hasil implementasi dari hasil pengkodean: Perancangan Sistem Perancangan sistem dengan arsitektur Application Programmable Interface Restful Web Service untuk sistem presensi yang multi instansi dan multi kegiatan menggunakan Unified Modelling Language (UML) yang terdiri dari use case diagram, activity perancangan database. Use Case Diagram Dalam usecase diagram pada Gambar 3 terdapat 2 aktor, yaitu Admin dan Peserta. Kedua aktor tersebut memiliki peran masing-masing. Admin bisa mengelola pesera, kegiatan, rekap daftar hadir dan profile. Peserta hanya bisa melakukan presensi dengan memindai Gambar 4. Halaman Login JURTEKSI (Jurnal Teknologi dan Sistem Informas. ISSN 2407-1811 (Prin. Vol. VII No. Dec 2020, hlm. 15 Ae 22 ISSN 2550-0201 (Onlin. DOI: https://doi. org/10. 33330/jurteksi. Available online at http://jurnal. id/index. php/jurteksi SIMPULAN Berdasarkan hasil dan pembahasan perancangan prototipe Sistem Presensi, maka simpulan yang dapat adalah sistem presensi berbasis web ini mampu membantu mengurangi penggunaan kertas dalam melakukan presensi serta mampu digunakan multi departemen dan multi kegiatan, sehingga layanan ini bersifat publik serta pencarian data dan rekapitulasi presensi menjadi lebih mudah dan cepat. Gambar 5. Halaman Peserta UCAPAN TERIMA KASIH Peneliti mengucapkan terima kasih kepada Deputi Bidang Penguatan Riset dan Pengembangan Kementerian Riset dan Teknologi/ Badan Riset dan Inovasi Nasional yang mendanai penelitian ini. Gambar 6. Halaman Kegiatan DAFTAR PUSTAKA