APLIKASI BUKU TAMU MENGGUNAKAN FITUR KAMERA DAN

AJAX BERBASIS WEBSITE PADA KANTOR DISPORA

KOTA MEDAN

Kherina Surya Ningsih1 Nur Jamilah Aruan2Ahmad Taufik Al Afkari Siahaan3

1,2
Program Studi Ilmu Komputer, Universitas Islam Negeri Sumatera Utara
E- mail : kherinasry@gmail.com1 aruanbr612@gmail.com2

Abstrak

Kebanyakan beberapa perusahaan atau instansi melakukan sebuah kegiatan dengan

menggunakan aplikasi sebagai pengelolaan data dan penyimpanan data mereka. Akan tetapi,
pengelolaan data pada buku tamu masih menggunakan cara yang manual. Hal itu dapat
menyebabkan kekeliruan, ketidak akuratan, dan juga informasi identitas tamu yang tidak
lengkap. Namun, kebanyakan perusahan sama sekali tidak terfikirkan akan hal itu. Padahal,
dengan adanya aplikasi pengisian buku tamu dapat memudahkan perusahaan untuk
mengelola data pada buku tamu secara akurat, efektif dan efisien tanpa adanya kekeliruan
data tersebut.
Aplikasi adalah suatu proses dari cara manual yang ditransformasikan ke komputer
dengan membuat sistem atau program agar data diolah lebih berdaya guna secara optimal
agar menghasilkan program yang berisikan perintah-perintah untuk melakukan
pengelolahan data.

Kata Knnci : Perusahaan, Aplikasi, Buku Tamu

Abstract

Most companies or agencies carry out an activity using an application as their data
management and data storage. However, data management in the guest book still uses a
manual method. Doing sso can lead to confusion, inaccuracy, as well as incomplete guest
identification information. However, most companies do not think about it at all. In fact, the
existence of a guest book filling application can make it easier for companies to manage data
in the guest book accurately, effectively and efficiently without any errors in the data.

Application is a process from a manual method that is transformed into a computer

by creating a system on program so that data is processed more efficiently in an optimal way
so as to produce a program that contains commands to manage data.

Keywords : Company, Application, Guestbook

 1. PENDAHULUAN bahasa pemrograman, berikut landasan
Aplikasi merupakan sebuah perangkat teori dari alat bantu yang digunakan dalam
lunak yang berperan untuk membantu pembuatan aplikasi Pengisian Buku Tamu
pekerjaan manusia agar lebih mudah, Berbasis Website :
efektif dan efisien. Berbagai kegiatan yang a. PHP
pada awalnya dilakukan secara manual, PHP merupakan script untuk
sekarang dengan adanya aplikasi maka pemrograman script web server-side,
proses pengolahan data dan penyimpanan script yang membuat dokumen HTML
data dapat terselesaikan dengan waktu secara on the fly, maksudnya dokumen
yang relatif lebih cepat. HTML yang dihasilkan dari suatu aplikasi
DINAS PEMUDA DAN OLAHRAGA , bukan dokumen HTML yang dibuat
sebagai tempat Kerja Praktik ini dengan menggunakan editor teks atau
merupakan Perusahaan yang sangat editor HTML. PHP/FI merupakan nama
relevan bagi saya sebagai Mahasiswa awal dari PHP. PHP adalah Personal
Fakultas Ilmu Komputer Universitas Islam Home Page, FI adalah Form Interface.
Negeri Sumatera Utara, karena DINAS Dibuat pertama kali oleh Rasmus Lerdoff.
PEMUDA DAN OLAHRAGA adalah PHP, awalnya merupakan program yang
sebuah industri teknologi informasi dikhususkan untuk menerima input melalui
komunikasi di indonesia dan tentu saja form yang ditampilkan dalam browser
akan memberikan banyak masukkan data web. Software ini disebarkan dan
informasi yang menyangkut teknologi. dilisensikan sebagai perangkat lunak Open
Source. (Rini Sovia dan Jimmy Febio,
Dengan pengisian buku tamu 2011). Berikut sintaks dasar dari bahasa
yang masih manual akan pemograman php:
menyebabkan sebuah penyimpanan
data tersebut menjadi kurang <?php
efektif dan efisien, karena echo "Ya Allah ACC";
membutuhkan ruangan yang besar
dan data bisa saja hilang atau ?>
rusak. b. Visual Studio Code
Visual Studio Code adalah sebuah
2. METODE teks editor ringan dan handal yang dibuat
Aplikasi Pengisian Buku Tamu di oleh Microsoft untuk sistem operasi
DINAS PEMUDA DAN OLAHRAGA multiplatform, artinya tersedia juga untuk
KOTA MEDAN ini dibuat dengan bahasa versi Linux, Mac, dan Windows. Teks
pemrograman PHP dengan menggunakan editor ini secara langsung mendukung
style prosedural dalam penulisan kodenya bahasa pemrograman Javascript,
sehingga lebih mudah dipelajari untuk Typescript, dan Node. Js, serta bahasa
pemula. Selain itu penulis juga pemrograman lainnya dengan bantuan
menggunakan sistem MySQL. plugin yang dapat dipasang via
Aplikasi Pengisian Buku Tamu ini marketplace Visual Studio Code seperti :
dibuat dengan beberapa software dan
C++, C#, Python, Go, Java, PHP, dst. MySQL adalah suatu perangkat
(Ummy Gusti Salamah, 2021). lunak database relasi atau Relational
Database management sistem (RDBMS)
yang didistribusikan gratis di bawah lisensi
c. Database GPL (General Public License). Dimana
Database secara sederhana, dapat setiap orang bebas menggunakan MySQL,
kita sebut sebagai gudang data. secara namun tidak boleh dijadikan produk
teori, database adalah kumpulan data atau turunan yang dijadikan closed source atau
informasi yang kompleks, data-data komersial (Dinata et al., 2015) .
tersebut disusun menjadi beberapa g. CSS Framework
kelompok dengan tipe data yang sejenis Pengertian dasar dari Framework itu
disebut table/entity), di mana setiap sendiri adalah sebuah konsep yang
datanya dapat saling berhubungan satu memiliki struktur serta terorganisir dalam
sama lain atau dapat berdiri sendiri, satu paket atau library. Dengan konsep ini,
sehingga mudah diakses (Rini Sovia dan diharapkan agar desainer dan developer
Jimmy Febio, 2011). lebih fokus pada projek yang sedang
d. XAMPP dikerjakannya tanpa harus memulainya
XAMPP adalah sebuah software dari awal. CSS Framework itu sendiri
web server apache yang didalamnya sudah merupakan suatu kumpulan sintak dari
tersedia database server MySQL dan dapat bahasa CSS yang telah diorganisir secara
mendukung pemrograman PHP. XAMPP tersusun (Zulmy Alhamri, 2016). Berikut
merupakan software yang mudah sintaks dasar dari bahasa pemograman
digunakan, gratis dan mendukung instalasi php:
di Linux dan Windows. Keuntungan h1 {text-align: center;
lainnya adalah cuma menginstal satu kali color: red;}
sudah tersedia Apache Web Server,
MySQL Database Server, PHP Support 1. Kebutuhan Sistem
(PHP 4 dan PHP 5) dan beberapa modul Dalam memahami kebutuhan
lainnya (Dinata et al., 2015). pengguna tentunya harus terdapat sistem
e. PhpMyAdmin yang menunjang untuk kelancaran
PhpMyAdmin adalah sebuah memahami serta memenuhi kebutuhan.
aplikasi/perangkat lunak bebas Kebutuhan sistem adalah pernyataan
(opensource) yang ditulis dalam bahasa tentang apa yang harus dilakukan oleh
pemrograman PHP yang digunakan untuk sistem dan pernyataan tentang karakteristik
menangani administrasi database MySQL yang harus dimiliki sistem merupakan
melalui jaringan lokal maupun internet. tujuan dari kebutuhan sistem.
phpMyAdmin mendukung berbagai Untuk merancang aplikasi Arsip data
operasi MySQL, diantaranya (mengelola pegawai ini dibutuhkan menganalisa
basis data, tabel-tabel, bidang (fields), kebutuhan. Analisa kebutuhan itu sendiri
relasi (relations), indeks, pengguna merupakan cara yang efektif untuk
(users), perijinan (permissions), dan lain- mengidentifikasi layanan yang akan
lain (Kholid, n.d.). disediakan oleh sistem. Untuk merancang
f. MySQL aplikasi arsip tersebut memerlukan
beberapa kebutuhan yaitu kebutuhan
Fungsional dan kebutuhan Non a. Hardware (Perangkat Keras)
Fungsional, berikut penjelasannya : Hardware adalah merupakan suatu
a. Kebutuhan Fungsional komponen yang terdapat dalam sebuah
Kebutuhan Fungsional adalah komputer, dapat dilihat dengan cara kasat
kebutuhan yang berisi proses-proses apa mata dan mampu disentuh secara fisik.
saja / layanan apa saja yang nantinya harus
disediakan oleh sistem, mencakup Sistem tersebut menggunakan 1 unit
bagaimana sistem harus bereaksi pada computer PC dengan spesifikasi sebagai
input tertentu dan bagaimana perilaku berikut:
sistem pada situasi tertentu. Kebutuhan  Processor
fungsional sistem merupakan  Monitor
kebutuhan yang harus dimiliki sistem.  Mouse
(Arifin et al., 2017)  RAM
Kebutuhan fungsional adalah fungsi dari  Keyboard
aplikasi yang telah dibuat yaitu menambah b. Software (Perangkat Lunak)
data, mengedit data, menghapus data dan
menyimpan data. Software adalah merupakan kumpulan data
b. Kebutuhan Non Fungsional elektronik yang disimpan dan diatur oleh
Kebutuhan Non Fungsional adalah komputer. Data komputer yang disimpan
kebutuhan yang menitikberatkan pada dapat berupa progam yang berguna untuk
properti prilaku yang dimiliki oleh sistem, menjalankan suatu perintah. Aplikasi Yang
kebutuhan fungsional juga sering disebut Digunakan (Software) sebagai berikut:
sebagai batasan layanan atau fungsi yang php, database, xampp, phpMyAdmin,
ditawarkan sistem seperti batasan waktu, mysql, css, uml.
batasan pengembangan proses, standarisasi
 PHP (Hypertext Processor)
dan lain lain. Kebutuhan fungsional sistem
 Database
merupakan kebutuhan yang harus
 Xampp
dimiliki sistem. (Arifin et al., 2017)
 PhpMyAdmin
Kebutuhan non fungsional adalah sistem
 MySQL
yang dibutuhkan oleh aplikasi yang dibuat.
 Visual Studio Code
Dalam segi keamanan, aplikasi Pengisian
 CSS
Buku Tamu ini membutuhkan username
dan password untuk dapat masuk ke Selain perancangan kebutuhan aplikasi
halaman berikutnya yaitu software dan hardware dalam
. perancangan pembuatan Aplikasi
2. Perancangan Pengisian Buku Tamu ada beberapa tahap
Perancangan basis data adalah proses perancangan lagi yang dilalui yaitu
untuk menentukan isi dan pengaturan data perancangan basis data dan implementasi,
yang dibutuhkan untuk mendukung berikut penjelasan tentang Aplikasi
berbagai rancangan sistem. Berikut Pengisian Buku Tamu :
penerapan perancangan pada aplikasi
Pengisian Buku Tamu pada PT. GRAHA
INFORMATIKA NUSANTARA yaitu
sebagai berikut:
3. HASIL DAN PEMBAHASAN ke sistem, meng-create sebuah daftar
Use case diagram menggambarkan belanja, dan sebagainya. Seorang/sebuah
fungsionalitas yang diharapkan dari sebuah aktor adalah sebuah entitas manusia atau
sistem. Yang ditekankan adalah “apa” mesin yang berinteraksi dengan sistem
yang diperbuat sistem, dan bukan untuk melakukan pekerjaan-pekerjaan
“bagaimana”. Sebuah use case tertentu (Dharwiyanti & Wahono) Berikut
merepresentasikan sebuah interaksi antara use case diagram pada sistem Pengisian
aktor dengan sistem. Use case merupakan Buku Tamu:
sebuah pekerjaan tertentu, misalnya login

UseCase Diagram Program Buku Tamu

Capture Gambar Pengunjung

admin Input data Pengunjung

Nama Pengunjung

Hapus data
Alamat Pengunjung

Tujuan Pengunjung

No Pengunjung

Perancangan Basis Data pada table Tamu

N Nama Jenis Length Extra Tidak ternilai

o
1 Id_tamu Int 6 Auto_incremement Tidak
2 Time Varchar 50 Tidak
3 Nama Varchar 50 Tidak
4 Alamat Varchar 150 Tidak
No Hp Varchar 20 Tidak
6 Pesan/Tujuan Text Tidak
7 Gambar Varchar 50 Tidak
1. Implementasi memasukkan Username dan Password
yang telah didaftarkan oleh admin dari
Hasil dari perancangan akan web Aplikasi ini agar dapat masuk ke
diimplementasikan pada program dan Halaman Beranda. Password pada
menjadi bentuk tampilan sebuah Aplikasi Halaman Login ini dapat di kombinasikan
Pengisian Buku Tamu dapat dilihat antara huruf dan angka agar Password
dibawah ini: yang dibuat semakin kuat tingkat
keamanannya. Dan Password tidak berupa
teks “ telanjang” pada saat di input pada
inputan Form Password melainkan diubah
menjadi karakter bulat hitam. Serta
a. Tampilan Halaman Login
Password sudah di enkripsi untuk
Dalam web Aplikasi Pengisian Buku Tamu
memperkuat keamanan data User dalam
yang telah dibuat ini terdapat Halaman
web Aplikasi Pengisian Buku Tamu ini
Login, berfungsi agar User bisa
.

Gambar 1. Tampilan Halaman Login

pengunjung seperti: Nama Pengunjung,

b. Tampilan Halaman Beranda Alamat Pengunjung, No Hp Pengunjung,
Pada bagian Halaman Beranda dapat kita Tujuan Pengunjung dan form Statistik
lihat terdapat form Pengisian Data yaitu Pengunjung yaitu untuk mengetahui
form untuk memasukkan isi data tentang jumlah seperti : Jumlah
Pengunjung Hari Ini, Jumlah Pengunjung Kemarin, Jumlah Pengunjung Bulan Ini,
Jumlah Pengunjung Keseluruhan

Gambar 2 Tampilan Halaman Beranda

c. Tampilan Data Pengunjung menampilkan wajah pengunjung, menu

Dalam Halaman Data Pengunjung dapat simpan untuk menyimpan data yang
kita lihat terdapat beberapa menu, seperti diinginkan, dan menu hapus sebagai
menu buka camera yang akan penghapus data.
 Gambar 3 Tampilan Data Pengunjung

d. Tampilan jika ingin menghapus data pengunjung

Jika ingin menghapus data-data bisa memilih tombol ok,jika tidak anda bisa memilih tombol
cancel.

2. KESIMPULAN Dari kreasi Aplikasi Pengisian Buku Tamu

Pada Laporan Akhir Kerja Praktik pada DINAS PEMUDA DAN
ini penulis dapat menyimpulkan bahwa, OLAHRAGA KOTA MEDAN ini dapat
penulis mengkreaasikan sebuah Aplikasi diperoleh fitur Pengisian Data, Statistik
Pengisian Buku Tamu berbasis web Pengunjung, Rekapitulasi Data, dan
menggunakan PHP dan MySQL pada Menyimpan File Data yang berfungsi
DINAS PEMUDA DAN OLAHRAGA untuk membuat proses pengolaan Buku
KOTA MEDAN untuk memudahkan Tamu yang awalnya dilakukan secara
dalam Pengisian Data Buku Tamu. manuaal menjadi lebih efektif, baik, dalam
segi waktu, tenaga dan kerapian dalam Tamu berbasis website pada DINAS
Pengisian Buku Tamu. PEMUDA DAN OLAHRAGA KOTA
Aplikasi Pengisian Buku Tamu MEDAN adalah sebagai berikut:
memiliki design yang memungkinkan user 1. Penulis dapat mengaplikasikan
untuk menginput Nama Pengunjung, ilmu yang didapat pada bangku
Alamat Pengunjung, No Hp Pengunjung, perkuliahan kedalam dunia kerja.
dan Tujuan Pengunjung. Selain itu user 2. Menjadikan proses penginputan
juga dapat menyimpan data, mengedit data dan penyimpanan data pada DINAS
serta menghapus data yang telah diinput. PEMUDA DAN OLAHRAGA KOTA
Kesimpulan yang penulis dapat MEDAN menjadi lebih efektif dan efesien.
dari pembuatan Aplikasi Pengisian Buku
 DAFTAR PUSTAKA

Arifin, M., Slamin, S., & Retnani, W. E. Y. (2017). Penerapan Metode Certainty Factor Untuk
Sistem Pakar Diagnosis Hama Dan Penyakit Pada Tanaman Tembakau. Berkala Sainstek,
5(1), 21. https://doi.org/10.19184/bst.v5i1.5370

Dharwiyanti, S., & Wahono, R. S. (2003). Pengantar Unified Modeling LAnguage (UML).
IlmuKomputer.Com, 1–13. http://www.unej.ac.id/pdf/yanti-uml.pdf

Dinata, I., Sunanda, W., Februariyanti, H., Handoko, P., Hermawan, H., Jaya, S., Iman, F. F.,
Kadir, A., Novianta, M. A., Setyaningsih, E., Pranata, I., Nuryadi, S., Sistem, P., Aki, M.,
Bermotor, K., Arduino, M., Dengan, N., Smartphone, A., Wicaksono, F. S., … Hidayat.
(2015). From Zero to A Pro Arduino. Momentum, 17(2), 1–8.

Jogiyanto. 2004. Pengenalan Komputer, Dasar Ilmu Komputer, Pemrograman Sistem Informasi
dan Intelegensi Buatan. Yogyakarta: Andi.

Kholid, M. U. (n.d.). Perancangan Sistem. 3, 38–44.

http://www.academia.edu/7511410/Perancangan_Sistem_Menurut_Jogiyanto_H

Rini Sovia dan Jimmy Febio. (2011). MEMBANGUN APLIKASI E-LIBRARY

MENGGUNAKAN HTML, PHP SCRIPT, DAN MYSQL DATABASE Rini Sovia dan
Jimmy Febio. Processor, 6(2), 38–54.

Ummy Gusti Salamah, S. ST., MIT. 2021. TUTORIAL VISUAL STUDIO CODE. Kota
Bandung : Media Sains Indonesia.

Zulmy Alhamri, R. (2016). Aplikasi Data Pokok Pendidikan Kota Kediri Dengan
Mengimplementasian Css Boostrap. Jurnal Informatika Dan Multimedia, 08(02), 38–