Anda di halaman 1dari 24

MANUAL BOOK

IoT Project Kit seri RFID + Web :


Sistem Perekaman Pengunjung
Project Case:
Perpustakaan Sekolah

 Instalasi XAMPP & Arduino


 Pembuatan Database
 Perakitan Hardware
 Konfigurasi Mikrokontroller
 Pengenalan Komponen Web

RIZKY PROJECT 2019


Sistem Perekaman Pengunjung

Deskripsi Project
Alat perekam pengunjung merupakan suatu perangkat mikrokontroller berbasis IoT yang
berfungsi untuk merekam data pengunjung secara real time. Perekaman data dilakukan
dengan cara melakukan taping kartu pada sensor RFID yang kemudian data yang diterima
akan dikirim secara real time ke web server. Perangkat mikrokontroller diprogram melalui
IDE Arduino menggunanakan bahasa C sedangkan untuk database dan aplikasi web dibangun
menggunakan MySQL dan php. Pada project ini yang menjadi project case adalah
perpustakaan sekolah yang juga nantinya dapat dikembangkan untuk implementasi lain.

Fitur – fitur aplikasi yang ditawarkan:


1. CRUD (Create Read Update Delete)
2. Sistem login & registrasi akun (level admin)
3. Session & cookie
4. Update data real time (jQuery)
5. Live search data (jQuery)
6. Import data from Excel
7. Export data to Excel & PDF
8. Dashboard
9. Tabel data anggota
10. Rekaman data pengnjung
Gambar 1. Alat Perekam Pengunjung
11. Form input & ubah data

Apa yang perlu anda siapkan untuk membangun project ini:


1. IDE Arduino
2. Driver Nodemcu
3. Web server XAMPP for Windows
4. Web browser (chrome, mozilla, etc)
5. Code Editor (Sublime text, Visual Studio code, Notepad etc.)

1|ManualBook IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

BAGIAN 1
PERSIAPAN SOFTWARE & DATABASE

2|ManualBook IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

A. Instalasi XAMPP di OS Windows

1. Kunjungi www.apachefriends.org -> pilih dan klik Download

Gambar 2. Tampilan Apache Friends

2. Silakan pilih versi php yang anda inginkan (disarankan pilih versi terbaru) dan sesuaikan
dengan mesin komputer anda (32 atau 64 bit) lalu klik Download. Jika anda tidak
menemukan versi yang anda inginkan silakan klik More Downloads.
3. Double klik file yang telah anda download, pilih English untuk language lalu klik Ok

4. Selanjutnya centang komponen yang akan diinstalasi, secara default Apache dan PHP
telah tercentang, tambahkan lagi centang pada MySQL dan phpMyAdmin lalu Next

Gambar 3. Komponen yang akan diinstalisasi

3|ManualBook IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

5. Pilih folder penyimpanan namun secara default anda akan diarahkan ke


lokasi c:\xampp. Jika Anda ingin menyimpannya di folder lain silakan klik browse dan
pilih penyimpanan yang ingin digunakan (saran penyimpanan di D:), klik tombol Install.

Gambar 4. Lokasi instalasi

6. Jika telah muncul jendela seperti paga Gambar 5, klik Finish untuk mengakhiri proses
instalasi.

Gambar 5. Tampilan Setup Wizard XAMPP

7. Kemudian akan muncul kotak dialog untuk mengkonfirmasi apakah anda ingin langsung
menjalankan XAMPP atau tidak Silakan pilih yes atau no.

4|ManualBook IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

8. Buka xampp control panel lalu jalankan web servernya dengan mengklik tombol start

Gambar 6. XAMPP Control Panel

9. Buka browser lalu ketikkan localhost jika muncul halaman seperti pada Gambar 7 maka
selamat anda telah berhasil menginstall XAMPP di PC/Laptop anda

Gambar 7. Tampilan localhost pada browser

B. Persiapan Database

1. Buka browser (chrome), lalu ketikkan di URL localhost/phpmyadmin

Gambar 8. phpMyAdmin

5|ManualBook IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

2. Buat database: Klik New -> Isikan kolom Database name dengan nama perpustakaan
-> klik create.

Gambar 9. Pembuatan database baru

3. Sekarang anda telah memiliki database. Buatlah tabel baru: klik perpustakaan -> pilih
dan klik New -> isikan nama tabel pada kolom Table name -> atur jumlah kolom tabel
pada kolom Add lalu klik Go -> Isikan nama kolom pada kolom Name -> isikan tipe
data pada kolom Type -> isikan panjang data pada kolom Length/values -> atur salah
satu kolom tabel pada kolom Index sebagai PRIMARY key -> klik save

Gambar 10. Pembuatan tabel baru

Buatlah beberapa tabel dalam database perpustakaan dan untuk nama tabel dan jumlah
kolom serta isian pada kolom Name, Type, Length/Values, dan Index silakan mengikuti
struktur pada tabel-tabel berikut:

6|ManualBook IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

 tabel_user berfungsi menampung data username dan password yang telah dibuat
untuk mengakses web Tabel ini terdiri atas 3 buah kolom.

Gambar 11. Struktur tabel_user

 tabel_id berfungsi menampung setiap ID kartu yang ditap yang selanjutnya ID kartu
tersebut diregistrasikan ke dalam database melalui sebuah form registrasi Tabel ini
terdiri atas dua buah kolom dan pada kolom idbaru diberi nilai 0 sebagai nilai awal.

Gambar 12. Struktur tabel_id

 tabel_anggota berfungsi untuk menampung data anggota perpustakaan. ID kartu


yang sebelumnya ditampung dalam tabel_id setelah diregistrasi akan masuk dalam
tabel ini. Tabel terdiri atas 7 kolom

Gambar 13. Struktur tabel_anggota

 tabel_kunjungan berfungsi untuk menampung data pengunjung dengan merekam


jam masuk dan jam keluar setiap kunjungan. Tabel ini terdiri atas 8 kolom.

Gambar 14. Struktur tabel_kunjungan

 on_visit berfungsi untuk menampung data jumlah pengunjung yang tengah berada di
dalam ruangan perpustakaan pada saat itu. Tabel ini terdiri atas 2 kolom dan pada
kolom pengunjung diberi nilai 0 sebagai nilai awal.
7|ManualBook IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

Gambar 15. Struktur on_visit

4. Selamat anda telah berhasil membuat database. Pastikan nama database, tabel, dan kolom
serta tipe data dan primary key semuanya telah sesuai (tak ada kesalahan peulisan).

5. Selanjutnya pindahkan folder perpustakaan yang ada di dalam CD ke dalam folder


htdocs yang ada di dalam folder xampp.

Gambar 16. Folder htdocs dalam XAMPP

Penting untuk diperhatikan!!!


Simbol kunci pada kolom tabel di struktur tabel merupakan simbol PRIMARY KEY

Penting untuk selalu diingat!!!


Pastikan anda telah menjalankan control panel XAMPP setiap kali ingin mengakses
localhost di laptop/PC anda (lihat Gambar 6).

8|ManualBook IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

C. Instalasi Software Compiler IDE Arduino

1. Silakan download IDE Arduino versi terbaru di http://arduino.cc/en/Main/Software. Jika


tidak ingin repot kami juga telah menyediakan IDE Arduino versi 1.8.9 di dalam CD,
silakan dipindahkan ke penyimpanan anda

Gambar 17. Tampilan arduino.cc/Main/Software

2. Buka folder Arduino -> pilih dan dobel klik file arduino.exe

Gambar 18. File arduino.exe dalam folder arduino

3. Jalankan file arduino, lalu buka file -> preferences. Pada jendela preferences tepatnya di
bagian bawah terdapat kolom Additional Board Manager URLs, lalu ketikkan
http://arduino.esp8266.com/stable/package_esp8266com_index.json -> klik OK

9|ManualBook IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

Gambar 19. Jendela Preferences pada arduino

4. Pilih dan klik menu Tools -> Board -> Boards Manager. Ketikkan di kolom pencarian
esp8266 -> klik install pada bagian bawah

Gambar 20. Jendela Boards Manager pada arduino

10 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

D. Instalasi Driver Nodemcu

1. Colokkan kabel USB ke port Nodemcu lalu sambungkan ke PC/laptop anda


2. Pindahkan folder driver CH341 yang ada di dalam CD ke penyimpanan anda
3. Buka folder CH341 -> dobel klik file CH341SER.EXE
4. Buka Device Manager, jika portnya telah terdeteksi maka driver berhasil terinstall

Gambar 21. Tampilan Device Manager

5. COM 13 adalah nama port yang nanti akan digunakan untuk mengupload program ke
board nodemcu melalui IDE arduino. Nama port pada setiap PC/laptop kemungkinan
akan berbeda satu sama lain.
6. Lakukan pengecekan board dan driver telah terinstall pada IDE arduino. Buka kembali
file arduino -> Tools -> Board. Jika tampilannya seperti pada Gambar 22 maka
selamat anda telah berhasil menginstall board dan driver nodemcu pada PC/laptop anda.

11 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

Gambar 22. Tampilan menu Tools pada IDE Arduino

Penting untuk selalu diingat!!!


Pastikan anda telah mengatur pilihan Board dan Port pada IDE arduino (lihat Gambar 22)
sebelum mengupload program. Seringkali terjadi kegagalan uploading yang diakibatkan
pilihan Board dan Port yang tidak sesuai. Silakan buka Device Manager untuk mengecek
port yang terpasang di PC/laptop anda.

E. Persiapan Library Arduino


Di dalam CD pada paket terdapat beberapa library yang telah kami siapkan. Silakan
pindahkan library tersebut ke folder arduino. Buka folder arduino lalu pilih folder libraries.

Gambar 24. List folder pendukung di CD

Gambar 23. Tampilan folder libraries Arduino

12 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

F. Persiapan File mp3


Di dalam CD juga telah disiapkan sebuah folder mp3 yang berisi 3 file audio. Sebelumnya
siapkan sebuah microsd card (ukuran berapapun), lalu format microsdcard tersebut ke dalam
format FAT atau FAT32. Selanjutnya silakan mengcopy folder mp3 lalu pindahkan ke
dalam microsd card anda.

Gambar 25. Format microsd card

Penting untuk diperhatikan:


Jangan mengubah nama file audio yang ada di dalam CD!!!

13 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

BAGIAN 2
PERSIAPAN HARDWARE & PROGRAM
MIKROKONTROLLER NODEMCU

14 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

G. Persiapan Hardware

1. Komponen yang digunakan:


 Nodemcu Lolin  DFplayer Mini mp3
 Expansion Board  Mini speaker 8 ohm 0,5 watt
 RFID RC522 + Tag ID  Kabel jumper female - female
 LCD 16x2 + I2C adapter
2. Komponen pendukung lainnya (di luar paket):
 Power adaptor 9V 1A
 Kabel USB
 Microsd card
3. Perakitan Hardware
 Nodemcu – RFID

Tabel 1. Koneksi pin Nodemcu - RFID


Nodemcu RFID
D3 RST
D4 SDA
D5 SCK
D6 MISO
D7 MOSI
GND GND
3V 3,3V
Gambar 26. Nodemcu + Expansion board

Gambar 27. Koneksi Pin Nodemcu RFID

15 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

 Nodemcu – LCD I2C

Tabel 2. Koneksi pin Nodemcu – LCD I2C


Nodemcu LCD I2C
D2 SDA
D1 SCL
GND GND
VUSB VCC
Gambar 28. LCD 16x02 + I2C adapter

Gambar 29. Koneksi pin


Nodemcu – LCD I2C

 Nodemcu – DFplayer

Tabel 2. Koneksi pin Nodemcu – DFPlayer


Nodemcu DFplayer Speaker
D0 Tx -
D8 Rx -
GND GND -
VUSB VCC -
- SPK_1 Red (+)
Gambar 30. Modul DFPlayer
- SPK_2 Black (-)

Perlu untuk diperhatikan:

Cabutlah kabel pin Rx dan Tx


sebelum mengupload sketch ke
Nodemcu. Biasanya terjadinya
kegagalan proses uploading
ketika pin Rx dan Tx masih
dalam keadaan terpasang.

Gambar 31. Koneksi pin Nodemcu - DFplayer

16 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

Seputar Power

Perlu diperhatikan bahwa untuk mensuplai power ke board nodemcu dapat menggunakan dua
cara yaitu melalui soket USB atau melalui jack DC. Jika power disuplai melalui USB maka
blok pin power yang dilingkari biru yang akan aktif sedangkan ketika power disuplai melalui
jack DC maka blok yang dilingkari merah yang akan aktif. Jika ingin menghasilkan tegangan
power yang stabil maka disrankan untuk menggunakan Power Adaptor DC 9V 1A yang
disambungkan melalui jack DC

Gambar 32. Blok pin output power expansion board


Penting untuk selalu diingat!!!
Pemasangan pin VCC dan GND jangan sampai terbalik/tertukar!!! Seringkali terjadi kerusakan
hardware akibat polaritas yang terbalik. Jadi pastikan pin VCC dan GND telah terpasang sesuai
skema sebelum dialiri arus listrik ke board.

H. Persiapan Source Code Arduino


1. Buka file .ino program arduino yang ada pada CD
2. Atur Board dan Port COM (sesuaikan dengan Device Manager)
3. Perhatikan Gambar 33, ubah IP address (yang di dalam kotak merah) sesuai dengan IP
adress pada PC/laptop anda. Cara mengetahui IP adress pada laptop/PC: Buka Command
Prompt -> ketik cmd -> ok. Setelah masuk jendela Command prompt, ketikkan ipconfig
lalu enter. Setelah itu akan muncul tampilan seperti Gambar 34, yang dilingkari hijau
adalah IP adress pada PC/laptop anda.

Gambar 33. Baris URL pada program arduino

Perlu diperhatikan bahwa IP address pada PC/laptop sifatnya IP dynamic yang sewaktu
waktu bisa berubah sehingga ketika suatu saat program tiba-tiba tidak berjalan sebagaimana
mestinya silakan cek kembali IP adress anda dan sesuaikan dengan program arduino anda.

17 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

Gambar 34. Tampilan jendela Command Prompt

4. Perhatikan kembali Gambar 33, untuk yang di dalam kotak biru adalah nama folder
penyimpanan file php yang ada di folder htdocs (dalam folder XAMPP). Silakan
disesuiakan dengan nama folder penyimpanan yang anda buat dalam folder htdocs anda.
5. Perhatikan Gambar 35, di dalam kotak biru adalah nama SSID dan yang di dalam kotak
merah adalah nama passwordnya. Silakan ganti dan sesuaikan dengan SSID dan password
dari WiFi atau hotspot yang anda gunakan.

Gambar 35. Baris SSID dan password pada program arduino

6. Setelah semua konfigurasi selesai silakan upload program ke board Nodemcu.


7. Buka serial monitor, kemudian atur baudrate pada angka 115200. Jika telah muncul
seperti pada Gambar 36 maka perangkat telah siap digunakan.

Gambar 36. Tampilan Serial Monitor IDE Arduino

18 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

BAGIAN 3
PENGENALAN KOMPONEN APLIKASI
WEB

19 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

I. Komponen Aplikasi Web


1. Sistem Login
Sistem login sebagaimana diketahui merupakan pintu pertama untuk mengakses halaman –
halaman lainnya yang ada dalam web tersebut. Aplikasi web juga telah dilengkapi session dan
cookie untuk pengelolaan hak akses client seperti fitur Ingat Saya untuk merekam username
dan password. Selain sistem login tentunya diperlukan halaman registrasi untuk mendaftarkan
username dan password baru yang akan digunakan untuk login.

Gambar 37. Halaman Login Gambar 38. Halaman Registrasi

2. Dashboard
Halaman ini merupakan halaman monitoring yang menampilkan data jumlah anggota yang
terdaftar dan jumlah pengunjung dalam satu hari, serta jumlah yang sedang berkunjung di
perpustakaan. Data di halaman ini diupdate secara Real Time.

Gambar 39. Halaman Dashboard

20 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

3. Data Anggota Perpustakaan


Sesuai dengan namanya halaman ini menampilkan data siswa yang terdaftar sebagai
anggota perpustakaan dalam bentuk tabel yang di dalamnya dilengkapi tombol untuk
menghapus dan mengubah data. Data yang ditampilkan diurut berdasarkan nama.

Gambar 40. Halaman Data Anggota Perpustakaan

4. Input Data Anggota


Penginputan data anggota ke dalam database dapat dilakukan dengan dua cara yakni
melalui form atau import. Penggunaan form dengan cara menginputkan satu per satu data
melalui sebuah form dimana kolom ID akan otomatis terisi ketika kartu ditap ke alat. Adapun
untuk cara import dengan menginputkan data yang tersimpan dalam bentuk file excel. Cara
import ini memungkinkan untuk menginput data ke database dalam jumlah besar secara
sekaligus. Hal yang perlu diperhatikan bahwa file yang akan diimport harus disimpan dengan
nama fileanggota.xls (MS Excel 97 – 2003).

Gambar 41. Halaman Registrasi Anggota

21 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

Gambar 42. Halaman Import Data

5. Rekaman Pengunjung Perpustakaan


Halaman ini menampilkan data kunjungan perpustakaan yang berhasil terekam oleh alat
dalam bentuk tabel. Data yang ditampilkan antara lain ID anggota, nama, kelas, tanggal
kunjungan serta jam masuk dan jam keluar. Data dalam tabel juga dapat ditampilkan
berdasarkan tiga menu pilihan yakni berdasarkan real time, nama, dan kelas. Halaman Data
Real Time sesuai namanya akan menampilkan data pengunjung secara real time, berbeda
halnya dengan halaman data yang ditampilkan berdasarkan kelas dan nama yang masih butuh
refresh halaman secara manual untuk reload data.

Gambar 43. Halaman Rekaman Pengunjung

6. Pelaporan Data
Pelaporan data atau data reporting baik itu data anggota maupun pengunjung dilakukan
dengan cara mengekspor data ke dalam bentuk file excel maupun pdf tergantung menu yang
dipilih pada halaman web.

22 | M a n u a l B o o k IoTProjectKitSeriRFID+Web
Sistem Perekaman Pengunjung

Gambar 44. Export to Excel

Gambar 45. Export to PDF

Penting untuk selalu diingat:


Pastikan komputer server dan perangkat nodemcu terhubung pada satu jaringan internet yang
sama. Jika ingin web anda bisa diakses dengan jaringan yang berbeda maka silakan melakukan
hosting pada web anda.

23 | M a n u a l B o o k IoTProjectKitSeriRFID+Web