Jurnal Teknik Informatika dan Sistem Informasi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 281-290 E- ISSN 2503-2933 281
Rancang Bangun Sistem Informasi Pendataan Tamu Berbasis Web
I Gede Hadi Darmawan*1
1,2Universitas Udayana
3Program Studi Teknologi Informasi, Universitas Udayana Bali e-mail: *1[email protected]
Abstrak
Kunjungan instansi atau lembaga merupakan hal yang sering terjadi di masyarakat.
Pengunjung atau tamu sering kali dicatat dalam agenda atau buku khusus (buku tamu) yang dicatat secara konvensional. Hal ini tentunya kurang efektif karena masih dilakukan pencatatan menggunakan buku fisik yang mudah rusak dan sering menimbulkan antrean di saat tamu mendata diri. Permasalah tersebut dapat diselesaikan dengan melakukan rancang bangun sistem informasi berbasis web untuk mendata tamu atau pengunjung. Hasil dari penelitian ini yakni berupa website dengan nama HiBook yang dapat digunakan untuk melakukan pendataan tamu atau pengunjung hanya dengan melakukan scan QR Code melalui ponsel. Dengan adanya sistem ini pengunjung dapat dengan mudah mendaftar atau mendata diri pada saat berkunjung, karena tidak perlu lagi menulis secara manual ataupun mengantre untuk mendaftar atau mendata diri, serta instansi atau Lembaga tidak perlu lagi melakukan perawatan dan pengarsipan buku tamu.
Kata kunci — Buku Tamu, QR Code, Sistem Informasi, Web
Abstract
Visit of agencies or institutions are something that occurs in the community. Visitors or guests are often recorded in a conventional recorded agenda or book (guest book). This is certainly less effective because it is still done by recording on a physical book that is easily damaged and often raises the queue in of the guest registration. The problem can be solved by designing a web-based information system to record guests or visitors. The result of this research is in the form of websites with the name Hibook that can be used to do the registration of visitor by scanning the QR code through the phone. With this system visitors can easily register a visiting, because they no longer need to write manually or queueing for registration, as well as agencies or institutions no longer need to take care and archiving guest books.
Keywords — Guest Book, Information System, QR Code, Web
1. PENDAHULUAN
Literasi digital dapat diartikan sebagai pengetahun dan atau kecakapan dalam menggunakan media digital baik berupa perangkat keras maupun perangkat lunak [1]–[4].
Literasi digital diperlukan guna mendukung Gerakan Literasi Nasional (GLN) yang digalakan oleh Kementrian Pendidikan dan Kebudayaan (Kemendikbud) Republik Indonesia [4]. Literasi digital dapat dilaksanakan di berbagai tempat, mulai dari instansi kerja maupun pendidikan [2], [4]. Masyarakat seringkali melakukan kunjungan pada suatu instansi contohnya ketika
282 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 281-290 E-ISSN 2503-2933
masyarakat datang ke sebuah perpustakaan untuk meminjam atau membaca buku, mahasiswa datang ke sebuah instansi atau perusahaan untuk bertanya, mewawancara, atau meminta data terkait penelitian yang sedang mereka lakukan. Ada pula saat siswa siswi melakukan studi banding ke lembaga pendidikan seperti sekolah atau perguruan tinggi, masyarakat umum datang ke instansi pemerintahan untuk melakukan kepengurusan administrasi maupun meminta informasi, dan masih banyak terdapat contoh-contoh kasus dan keperluan lain sebuah instansi atau lembaga mendapat kunjungan dari masyarakat.
Masyarakat yang melakukan kunjungan kesebuah instansi atau lembaga ataupun perusahaan, kerap kali diminta untuk mengisi daftar kunjungan atau buku tamu. Saat pengunjung mengisi buku tamu, sering terjadi permasalahan yakni adanya antrean dan tulisan yang susah di baca akibat tamu atau pengunjung yang mengisi secara tergesa-gesa. Bahkan ada beberapa tamu yang enggan mengisi karena harus mengantre dan menulis. Permasalahan lain yang sering terjadi adalah bolpoin yang rusak, buku tamu yang penuh dan lupa diganti atau bahkan petugas yang lupa meminta pengunjung untuk mengisi buku tamu lantaran jumlah tamu yang cukup banyak. Disaat yang sama, saat ini hampir semua masyarakat memiliki perangkat telepon genggam (Handphone), apalagi mengingat mereka yang berkunjung ke sebuah instansi atau lembaga tersebut pada umumnya adalah masyakarat yang terliterasi.
Permasalahan tersebut dapat diselesaikan dengan melakukan rancang bangun sistem yang dapat diakses dengan mudah oleh masyarakat umum yang berkunjung ke sebuah instansi, lembaga, atau perusahaan tertentu. Penelitian ini bertujuan untuk melakukan rancang bangun sistem informasi pendataan tamu/pengunjung berbasis web. Sistem yang dibangun pada penelitian ini menghasilkan website yang dapat diakses dengan mudah oleh pengguna (masyarakat yang berkunjung) hanya dengan melakukan scan QR Code menggunakan smartphone tanpa harus meng-install aplikasi. Sistem juga dapat menampilkan daftar kunjungan sebelumnya, memberikan pesan dan kesan, memberikan donasi bisa diperlukan, dan meminta bantuan atau melihat panduan apabila pengunjung kesulitan untuk mengisi daftar hadir.
Penelitian [5] dengan judul Sistem informasi Buku Tamu front end pada Badan Pusat Statistik membantu dalam hal perekaman data pengunjung, dengan menyediakan suatu perangkat mobile yang berbasis Android yang ada pada bagian pelayanan, selanjutnya pengunjung cukup mengisi biodata diri sesuai dengan panduan dan perekaman wajah dengan memanfaatkan camera depan yang ada pada perangkat dan data tersebut tersimpan dalam suatu database, kepala Badan Pusat Statistik bisa melihat perkembangan pengunjung dan tujuannya secara berkala. Penelitian [6] dengan judul Aplikasi Buku Tamu Elektronik Pada Dinas Pendidikan dan Kebudayaan Kabupaten Musi Banyuasin Aplikasi ini dibuat dengan menggunakan bahasa pemograman PHP yang didukung database MySQL, aplikasi ini juga dibuat dengan berbasis web. Model perancangan sistem yang digunakan adalah model prototype. Dengan adanya Aplikasi Buku Tamu ini agar dapat meningkatkan kinerja dan pelayanan pada Dinas Pendidikan dan Kebudayaan Kabupaten Musi Banyuasin.
Penelitian [7] dengan judul Sistem Informasi Buku Tamu Menggunakan QR Code Berbasis Web Pada PT Petrokimia Gresik peneliti membuat sebuah Sistem Informasi Buku Tamu Petrokimia Gresik Menggunakan QR Code Berbasis Web yang dapat digunakan untuk menerima tamu yang akan berkunjung pada Petrokimia. Sistem ini dibuat dengan menggunakan metode Waterfall dan dibuat dengan bahasa pemrograman PHP dengan database MySQL.
Penelitian [8] dengan judul Simple CRUD Buku Tamu Perpustakaan Berbasis PHP dan MySQL. Format elektronik buku tamu dirancang dari bahasa pemrograman komputer. Simple CRUD Buku Tamu adalah proses pembuatan sebuah aplikasi sederhana menggunakan bahasa pemrograman PHP dan MySQL. Program PHP dan MySQL tersebut biasanya sudah di- bundling dalam satu paket bernama XAMPP. Langkah-langkah pembuatan dimulai dari instalasi XAMPP, kemudian perancangan database MySQL, dan pembuatan file eksekusi yang
Jatisi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 280-291 E- ISSN 2503-2933 283
disimpan dalam file ekstensi PHP, sehingga menghasilkan sebuah aplikasi buku tamu.
Penelitian [9] dengan judul Perancangan Sistem Informasi Buku Tamu Berbasis Web di Praktisi Politeknik Binis Digital. Penelitian ini bertujuan untuk merancang sistem informasi buku tamu di Politeknik Praktisi Bandung, dimana sistem informasi ini diharapkan dapat membantu dalam manajemen pengelolaan tamu. Metode dalam penelitian ini menggunakan metode wawancara, observasi dan studi pustaka serta Metode Waterfall dan penggambaran sistem menggunakan UML. sedangkan aplikasi yang digunakan dalam pengembangan perangkat lunak menggunakan Microsoft Visual Studio 2010 dan Microsoft Access 2016.
Berdasarkan beberapa penelitian serupa yang sebelumnya membahas mengenai sistem pendataan tamu atau pengunjung [5]–[9], terdapat beberapa perbedaaan seperti fitur yang disedikan tidak selengkap fitur yang dibuat pada penelitian ini seperti tidak adanya fitur Donasi, fitur Pesan Kesan, dan fitur Bantuan. Masih juga terdapat penelitian yang menggunakan PHP navite ataupun sistem yang dibuat pada penelitian sebelumnya menggunakan versi mobile tanpa adanya versi web.
2. METODE PENELITIAN
Perancangan dan pengembangan sistem informasi pendataan tamu atau pengunjung berbasis web terbagi ke dalam 3 proses yakni tahap Research, tahap System Development atau pengembangan sistem, dan tahap Testing and Implementation atau uji coba dan implementasi sistem. Alur perancangan dan pengembangan sistem pada penelitian ini dapat dilihat pada Gambar 1.
Gambar 1. Alur Penelitian
Tahap Research terdiri dari 4 proses yaitu studi literatur, wawancara dan obsevasi, pembuatan Data Flow Diagram, dan perancangan basis data. Proses studi literatur adalah proses mencari kajian pustaka dan literatur terkait dengan rancang bangun sistem informasi pendataan tamu/pengunjung. Proses wawancara dan observasi dilakukan melakukan wawancara dengan pemiliki startup yang dijakan studi kasus sekaligus tempat melakukan uji coba dan
284 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 281-290 E-ISSN 2503-2933
implementasi sistem. Wawancara dan obsevasi dilakukan untuk mengetahui proses bisnis dan kebutuhan sistem. Proses ketiga yakni membuat Data Flow Diagram. Data Flow Diagram merupakan diagram yang secara khusus menggambarkan dan memodelkan aliran data pada sistem [10]. DFD terdiri dari beberapa level yang dibuat sesuai dengan kebutuhan sistem [10], [11]. Data Flow Diagram yang dibuat untuk menggambarkan aliran data pada sistem menggunakan Diagram Konteks yang dapat dilihat pada gambar 2.
Gambar 2. Context Diagram
Proses berikutnya adalah perancangan database. Sistem yang dibangun pada penelitian ini menggunakan basis data MySQL, karena merupakan salah satu jenis dari DBMS yang sangat umum digunakan [12], [13]. Database Management System (DBMS) atau sering disebut dengan Relational Database Management System (RDBMS) merupakan software yang digunakan untuk melakukan manajemen dan query data pada database seperti [13], [14].
DBMS terdiri dari banyak jenis seperti MySQL, Oracle, dan Microsoft Access [13].
Selain itu alasan pemilihan MySQL dibandingan dengan RDBMS lain adalah karena merupakan database technology yang popular saat ini, banyak digunakan diberbagai aplikasi, serta dapat berjalan diberbagai jenis platform mulai dari Linux, Windows, hingga Mac OS X [12]–[14].
Rancangan database pada sistem informasi pendataan tamu/pengunjung berbasis web terdiri dari 4 tabel yakni Tabel Customer, Tabel Master Unit, Tabel Tamu, dan Tabel Tamu Detail.
Rancangan database dari sistem yang dibuat pada penelitian ini dapat dilihat pada gambar 3.
Jatisi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 280-291 E- ISSN 2503-2933 285
Gambar 3. Database Design
Tabel Customer terdiri dari 13 field, Tabel Master Unit terdiri dari 7 field, Tabel Tamu terdiri dari 11 field dan Tabel Tamu Detail terdiri dari 14 field. Tahap berikutnya adalah System Development. System Development merupakan tahap pembuatan sistem, setelah sebelumnya dilakukan research terkait. Pembuatan sistem dilakukan dengan menggunakan Laravel framework, PHP, JavaScript, HTML dan Bootstrap framework. Laravel framework digunakan sebagai backend system. Laravel framework merupakan open source PHP based web framework yang digunakan untuk membangun sistem yang kompleks dengan arsitektur MVC (Model, View, Controller), terintegrasi dengan framework lain seperti Bootstrap dan Angular JS, serta telah memiliki sistem keamanan tersendiri seperti CSRF (Cross Site Resource Forgery) Security System dan Bcrypt Hashing Algorithm. [15], [16].
Bagian front end dan user interface untuk sistem informasi pendataan tamu/pengunjung menggunakan Bootstrap framework. Bootstrap merupakan open source framework yang digunakan pada front end web development untuk membuat tampilan yang responsive di berbagai ukuran layar karena telah menerapkan CSS Grid System, dapat diakses di berbagai browser mulai dari Safari, Mozilla Firefox, Opera, Google Chrome, Internet Explorer, hingga Microsoft Edge, dengan cara mengaplikasian pada HTML yang sangat mudah. [17], [18]. Tahap ketiga adalah melakukan uji coba dan implementasi langsung sistem pada startup NgaeApp.
Sistem diuji langsung oleh sejumlah customer dari NgaeApp dengan mengisi formulir kehadiran menggunakan sistem yang telah dibuat. Uji coba langsung berguna untuk mengetahui apakah setiap fungsionalitas pada sistem yang dibuat telah berjalan sebagaimana mestinya [19].
3. HASIL DAN PEMBAHASAN
Pembuatan atau development dari sistem informasi pendataan tamu dan pengunjung berbasis web dilakukan dengan menggunakan kerangka kerja Laravel, kerangka kerja Bootstrap, bahasa pemrograman PHP, JavaScript, HTML, dan CSS. Sistem pada penelitian in terdiri dari 5 fitur yakni fitur Daftar Tamu, fitur Catat Kunjungan, fitur Pesan dan Kesan, fitur Donasi, dan fitur Bantuan. Tampilan antarmuka dari fitur Daftar Tamu dapat dilihat pada gambar 4.
286 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 281-290 E-ISSN 2503-2933
Gambar 4. Tampilan Antarmuka Fitur Daftar Tamu
Fitur Daftar Tamu merupakan tampilan antarmuka yang menampilkan daftar semua pengunjung selama 1 tahun terakhir. Pengguna dapat melihat secara langsung nama pengunjung, tujuan melakukan kunjungan serta tanggal melakukan kunjungan. Selanjutnya adalah fitur Catat Kunjungan yang dapat dilihat pada gambar 5.
Gambar 5. Tampilan Antarmuka Fitur Catat Kunjungan
Fitur Catat Kunjungan merupakan tampilan antarmuka yang pertama kali diakses oleh pengunjung setelah melakukan scan QR Code yang telah disediakan. Halaman ini terdiri dari form dengan 6 field didalamnya yakni asal pengunjung, nama lengkap, jenis kelamin, tujuan melakukan kunjungan alamat email dan nomor telepon atau WhatsApp. Khusus untuk alamat
Jatisi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 280-291 E- ISSN 2503-2933 287
email dan nomor telepon atau WhatsApp tidak bersifat wajib untuk diisi. Berikutnya apabila ingin memberikan saran ataupun masukan dapat dilakukan dengan mengakses fitur Pesan Kesan seperti yang terlihat pada gambar 6.
Gambar 6. Tampilan Antarmuka Fitur Pesan Kesan
Fitur Pesan Kesan hanya dapat diakses apabila tamu atau pengunjung telah mendaftar mengisi data kunjungan pada halaman Catat Kunjungan. Fitur ini dibuat bertujuan agar pengunjung juga dapat menyampaikan aspirasi mereka. Fitur berikutnya adalah fitur Donasi yang dapat dilihat pada gambar 7.
Gambar 7. Tampilan Antarmuka Fitur Donasi
288 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 281-290 E-ISSN 2503-2933
Gambar 8. Tampilan Antarmuka Fitur Bantuan
Fitur Donasi bersifat opsional yang mana dapat digunakan apabila pengunjung ingin memberikan donasi melalui rekening digital, tidak lagi menggunakan kotak amal secara konvensional. Fitur terakhir adalah fitur Bantuan yang dapat dilihat pada gambar 8.
Halaman Bantuan difokuskan dengan menampilkan pesan untuk meminta bantuan langsung kepada petugas atau staf yang bertugas di instansi atau perusahaan tempat masyarakat berkunjung agar dapat dibantu secara langsung apabila terjadi kendala.
4. KESIMPULAN
Berdasarkan hasil pengujian dan implementasi yang dilakukan dengan mengambil contoh studi kasus dan penerapan pada startup NgaeApp maka dapat disimpulkan bahwa sistem pendataan tamu/pengunjung telah mampu menjawab permasalahan terkait dengan antrean yang sering terjadi pada saat tamu mendaftar atau mengisi data diri, tulisan yang kerap sulit terbaca, dan perusahaan atau instansi yang dalam hal ini NgaeApp tidak perlu lagi mengeluarkan buku fisik untuk digunakan sebagai buku tamu. Sistem yang dibuat dengan basis web juga memudahkan pengguna karena tidak perlu meng-install aplikasi sebelum berjunjung.
5. SARAN
Penelitian ini masih jauh dari kata sempurna, maka dari itu perlu adanya pengembangan lebih lanjut untuk keefektivitasan website, seperti:
1. Pengguna yang dalam hal ini adalah instansi/lembaga dapat dibuat secara dinamis, dengan melakukan sebuat fitur konfigurasi tanpa harus melakukan cloning ataupun penambahan data melalui database.
2. Perlu juga ditambah fitur untuk melakukan manajemen Master Data, serta export data dalam bentuk laporan.
3. Terakhir untuk tampilan antarmuka sistem dapat ditingkatkan dari sisi user interface (UI) dan user experince (EX).
Jatisi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 280-291 E- ISSN 2503-2933 289
UCAPAN TERIMA KASIHUcapan terimakasih diberikan kepada semua pihak yang ikut membantu dalam menyelesaikan penelitian ini, baik terlibat secara langsung maupun tidak langsung. Semoga bantuan yang diberikan membawa kemanfaatan bagi penulis, pembaca, maupun semua pihak yang ikut membantu.
DAFTAR PUSTAKA
[1] P. Rianto, P. Studi, I. Komunikasi, F. Psikologi, and S. Budaya, “Literasi Digital dan Etika Media Sosial di Era Post-Truth,” 2019.
[2] S. Mardiana, Annisarizki, Marthalena, Liza Diniarizky Putri, and Sigit Surahman,
“Literasi Digital Dalam Upaya Mendukung Pembelajaran Online pada Siswa Sekolah Dasar di Kota Cilegon,” Kaibon Abhinaya: Jurnal Pengabdian Masyarakat, Vol. 4, No.
1, pp. 47–54, Jan. 2022, doi: 10.30656/ka.v4i1.3809.
[3] O. Agus and K. Shavab, “Literasi Digital Melalui Pemanfaatan Media Pembelajaran Edmodo Pada Pembelajaran Sejarah,” Jurnal Sejarah, Budaya, dan Pengajarannya, Vol. 14, No. 2, pp. 142–152, 2020, doi: 10.17977/um020v14i22020p142.
[4] I. Fitri Rahmadi, E. Hayati, J. Puspitek No, B. Serpong, and K. Tangerang Selatan,
“Digital Literacy, Massive Open Online Courses, snd 21 st Century Learning Abilities of Millennial Generation Students,” Jurnal Studi Komunikasi dan Media, Vol. 24, No. 1, pp. 91–104, 2020.
[5] P. Badan Pusat Statistik Rokan Hulu, B. Yanto, A. Setia Putra, U. Pasir Pangaraian Jl Tuanku Tambusai, and K. Kec Rambah Hilir Kabupaten Rokan Hulu, “Sistem Informasi Buku Tamu Front End Berbasis Android,” 2017.
[6] A. Buku Tamu Elektronik pada Dinas Pendidikan dan Kebudayaan Kabupaten Musi Banyuasin Ekkal Prasetyo, “Jurnal TIPS : Jurnal Teknologi Informasi dan Komputer Politeknik Sekayu,” Jurnal TIPS : Jurnal Teknologi Informasi dan Komputer Politeknik Sekayu, Vol. 9, No. 1, pp. 9–16, 2019, [Online]. Available:
https://androidunik.com/pengetahuan/
[7] A. Y. Mubarok and U. Chotijah, “Sistem Informasi Buku Tamu Menggunakan Qr Code Berbasis Web pada PT Petrokimia Gresik,” Jurnal Ilmiah ILKOMINFO, Vol. 4, No. 1, pp. 57–66, 2021.
[8] R. Safitri, “Simple Crud Buku Tamu Perpustakaan Berbasis PHP DAN MySQL :Langkah-Langkah Pembuatan,” Jurnal Tibannduru, Vol. 2, No. 2, pp. 40–53, 2018.
[9] A. Agefiftin and Y. Yanuar, “Perancangan Sistem Informasi Buku Tamu Berbasis Web di Praktisi Politeknik Bisnis Digital,” 2021.
290 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 281-290 E-ISSN 2503-2933
[10] R. Ibrahim and S. Y. Yen, “Formalization of The Data Flow Diagram Rules for Consistency Check,” International Journal of Software Engineering & Applications, Vol.
1, No. 4, pp. 95–111, Oct. 2010, doi: 10.5121/ijsea.2010.1406.
[11] Y. Surono, “[31] [2014] Data Flow Diagram (DFD) pada Apotek Candra Kota Jambi,”
Jurnal Ilmiah Universitas Batanghari Jambi, Vol. 14, No. 4, pp. 56–64, 2014.
[12] I. Warman and R. Ramdaniansyah, “Analisis Perbandingan Kinerja Query Database Management System (DBMS) Antara MySQL 5.7.16 Dan Mariadb 10.1,” Jurnal Teknoif, Vol. 6, No. 1, pp. 32–41, Apr. 2018, doi: 10.21063/jtif.2018.v6.1.32-41.
[13] H. Bobobekova and Mk. Nurullayeva, “Texas Journal of Multidisciplinary Studies Database Management Systems,” Texas Journal od Multidisciplinary Studies, Vol. 6, pp.
253–255, 2022, [Online]. Available: https://zienjournals.com
[14] B. Rawat and S. Purnama, “MySQL Database Management System (DBMS) On FTP Site LAPAN Bandung,” International Journal of Cyber and IT Service Management (IJCITSM), Vol. 1, No. 2, pp. 173–179, 2021, doi: 10.34306/ijcitsm.v1i1.47.
[15] M. I. Kausar Bagwan and P. D. Swati Ghule, “A Modern Review on Laravel-PHP Framework,” IRE Journals, Vol. 2, No. 12, pp. 1–3, 2019.
[16] A. Rizky, A. Susilo, and J. Walihadi, “Perancangan Sistem Informasi Teknologi Website Dalam Pembelajaran Online Berbasis Framework Laravel di Era Revolusi 4.0,” BEST Journal, Vol. 5, No. 1, pp. 190–196, 2022, [Online]. Available: https://bit.ly/3qZWRVe
[17] S. Shahu Gaikwad and P. Adkar, “A Review Paper on Bootstrap Framework,” IRE Journals, Vol. 2, No. 10, pp. 349–351, 2019, [Online]. Available:
https://www.think247.com/vertical?s_pt=sou
[18] H. M. Siagian, “Implementasi Framework Bootstrap pada Sistem Kerja Praktek Berbasis Web Responsive,” Sistem Informasi |, Vol. 9, No. 1, pp. 6–11.
[19] W. Nur Cholifah and S. Melati Sagita, “Pengujian Black Box Testing Pada Aplikasi Action & Strategy Berbasis Android Dengan Teknologi Phonegap,” 2018.
