BAB III PERANCANGAN ALAT 3.1.
Block Diagram dari Konfigurasi System
Puas
Main Control Ethernet Module
berbasis
Local Area Network
Arduino UNO
Sangat puas
(LAN)
Tidak Puas
Database
Suara
Display
Gambar 3.1 Block Diagram System
67
68
Dari Block Diagram System yang telah dirancang, Ada beberapa bagian utama dalam perancangan system ini yaitu : 1. Perancangan System Device 2. Perancangan System Server 3. Perancangan System Database 4. Perancangan System Display Sebagaimana 4 system ini terlebih dahulu dirancang satu – persatu agar mempermudah dalam pembuatan alat dan system. 3.2 Persiapan System Device Perancangan Alat ini membutuhkan alat – alat pendukung sebagai berikut: Tabel 3.1 Komponen Hardware NO 1 2 3 4 6 7 8 9 10 11 12
Sisi Hardware Quantity Arduino UnoR3 + kabel data 1 Module Ethernet Arduino Shield 1 Kabel LAN (RJ45) 1 Meter Led Hijau 3 Resistor 10 kohm – ¼ watt 3 Resistor 220 kohm – ¼ watt 3 Kabel sisir warna 1 meter 10 pin 1 PCB Matric 1 Kabel jumper 20 Acrylic 1 Push Button 3 Selain hardware, ada juga terdapat software yang harus dipersiapkan pula
sebagaimana table dibawah ini : Tabel 3.2 Bahan-Bahan sisi Software NO 1 2 3 4 5 6
Sisi Software Arduino IDE software Visual Basic 6 Xampp 1.7.7 Fusion Chart for VB Navicat Premium for Mysql Windows media player
69
3.2.1
Perancangan Hardware Pada perancangan hardware ini terdapat 2 bagian yaitu : 1. Perancangan Rangkaian hardware 2. Perancangan Software hardware
Dari point diatas, maka akan dapat dirancang dari rangkaian hardware dan software hardware. 3.2.1.1 Perancangan Rangkaian Hardware Pada rangkaian hardware terdapat wiring diagramnya menggunakan Proteus :
Gambar 3.2 Wiring Diagram Pada wiring diagram dapat dijelaskan terdapat arduino, resistor, LED, push button, dan Ethernet. Pada bagian arduino berfungsi sebagai main control, untuk resistor 10 K sebagai pull up dimana tegangan negatif agar tidak bertabrakan dengan tegangan positif, untuk resistor 220 k.
70
berfungsi sebagai penahan daya agar tegangan yang masuk ke LED tidak terlalu besar yang membuat LED terputus karena LED mempunyai tegangan peak pada 3,3 Volt, LED berfungsi sebagai indicator dari status penekanan dari push button.pada rangkaian diatas untuk push button merupakan aktif high yang mana input yang diberikan kepada arduino bernilai 1 ( HIGH) atau 5 Volt, sedangkan untuk LED juga aktif high yang mana input dari arduino bernilai 1 untuk menghidupkan LED tersebut. Sedangkan Ethernet berfungsi sebagai modul yang menangani komunikasi antara microcontroller arduino dengan Ethernet card. Ethernet modul menggunakan pin 10 yang mana berfungsi sebagai Pin Slave Select untuk protokol SPI, active low. Diberi pulsa berlogika 0 untuk pengiriman 1 paket, pin 11 yang berfungsi sebagai MOSI (input) yang mana Jalur data masuk untuk protokol SPI, PIN 12 yang berfungsi MISO (output) yaitu Jalur data keluar untuk protokol SPI. dan pin 13 SCK (input) yang berfungsi sebagai Jalur clock masuk untuk protokol SPI, frekuensi maksimum 20 MHz. untuk terhubung ke arduino. Supply menggunakan port USB pada komputer yang tegangannya 5 Volt sehingga tidak ditemukan adaptor atau power supply. 3.2.1.2 Perancangan Software hardware Pada Hardware terdapat software yang digunakan yaitu software Arduino IDE 1.0.5. berikut flowchart program yang akan dibuat :
Start 71 Inisialisai
Setup I/0
No No
No
If Button 3 = HIGH
If Button 1 = HIGH
If Button 2 = HIGH
LED 1 = HIGH
LED 2 = HIGH
LED 3 = HIGH
Delay = 500
Delay = 500
http_request(id,btn_ value,ip_local)
http_request(id,btn_ value,ip_local)
Ya
Delay = 500
http_request(id,btn_ value,ip_local)
http_request(id,btn_ value,ip_local)
Get : Id_device
Go to Ulang Print”Connection failed” If Connected to server
No
Get : Button State Yes Get : IP Local
Get Method URL
END
Gambar 3.3 FlowChart Program Arduino
GET /ta/sync.php?id=id_device &btn_value=Button_state &ip_address=ip_local
72
Pembuatan flowchart diatas dapat dijelaskan sebagai berikut :
Start Star merupakan awal eksekusi untuk menjalankan program tersebut
Iniliasisasi Berikut
adalah
potongan
source
code
inisialisasi
beserta
keterangannya: char server[ ] = "192.168.1.2";
// name address for Google (using
DNS) Merupakan server yang akan terhubung ke database IPAddress gateway(192,168,1,1); Merupakan gateway dari jaringan local area IPAddress ip(192,168,1,3); char ip_local[] = "192.168.1.3"; Merupakan IP Local int a=0; char id[]="KAM001"; int btn_value = 1; Merupakan ID dari device yang telah teregistrasi di database const int buttonPin1 = 7; const int ledPin1 = 4; const int buttonPin2 = 6; const int ledPin2 = 3; const int buttonPin3 = 5;
// the number of the pushbutton pin // the number of the LED pin // the number of the pushbutton pin // the number of the LED pin // the number of the pushbutton pin
73
const int ledPin3 = 2;
// the number of the LED pin
Merupakan inisialisasi variable
Setup Berikut adalah potongan source code setup beserta keterangannya : Serial.begin(9600); while (!Serial) { ; Merupakan yang fungsinya untuk mengkonfigurasi komunikai serial Ethernet.begin(mac, ip, gateway); Merupakan untuk mengkonfigurasi Ethernet pinMode(ledPin1, OUTPUT); pinMode(buttonPin1, INPUT); pinMode(ledPin2, OUTPUT); pinMode(buttonPin2, INPUT); pinMode(ledPin3, OUTPUT); pinMode(buttonPin3, INPUT); Merupakan konfigurasi I/O
Eksekusi Berikut adalah potongan source code setup beserta keterangannya : buttonState1 = digitalRead(buttonPin1); buttonState2 = digitalRead(buttonPin2); buttonState3 = digitalRead(buttonPin3);
Keterangan : untuk membaca data digital input dan disimpan ke data variable button slave 1,2 dan 3
74
if (buttonState1 == HIGH) { digitalWrite(ledPin1, HIGH); while(buttonState1 != HIGH){} delay(500); http_request(id,1,ip_local); delay(200);
} else { digitalWrite(ledpin1, LOW);
Keterangan sean button slate, jika button 1= HIGH, maka hidupkan LED dan panggil http_request(id,1,ip_local); jika tidak maka LED dimatikan dan membaca logika LOW. void http_request(char id[],int btn_value,char ip_address[]) { int cont = 0; ulang: a = 0; Serial.println("connecting..."); if (client.connect(server, 80)) { Serial.println("connected"); client.print("GET /ta/sync.php?id="); client.print(id);
75
client.print("&btn_value="); client.print(btn_value); client.print("&ip_address="); client.print(ip_address); client.println("&submit; HTTP/1.1"); client.print("Host: "); client.println(server); client.println("Connection: close"); client.println(); } else { Serial.println("connection failed"); delay(1000); goto ulang; } Keterangan : http request merupakan fungsion yang berfungsi untuk mengakses server dengan metode get URL, yaitu mengakses file sync.php server lalu mengirimkan parameter ID device btn_value,char ip_address[]) 3.3 Perancangan System Server Dalam perancangan server yaitu menggunakan Xampp 1.7.7 untuk windows xp, pembuatan webserver dengan Xampp sebagai berikut:
76
Menginstal xampp versi 1.7.7 menjalankan xampp dengan cara :
Gambar 3.4 Running program Xampp 1.7.7 Maka akan muncul tampilan sebagai berikut:
Gambar 3.5 Running program Xampp 1.7.7 memastikan Apache running dan SVC nya dichecklist, dan setelah itu buka pada browser dengan mengketik “localhost”. Maka akan muncul tampilan sebagai berikut:
77
Gambar 3.6 Tampilan Xampp Jika ini sudah berhasil apache server nya sudah running dengan Normal. 3.4 Perancangan System Database Untuk mempermudah pengerjaan database mysql, pada system ini menggunakan Navicat for MySQL seperti tampilan awalnya berikut ini :
Gambar 3.7 Program Navicat for Mysql Berikut langkah-langkah dalam pembuatan database menggunakan Mysql :
Settingan connection sebagai berikut:
78
Gambar 3.8 Setting Connection
Untuk menguji apakah koneksinya berhasil dapat dilakukan dengan cara click “Test Connection” jika koneksi sukses, tekan “OK”
Membuat database baru dengan mengclick kanan connection yang telah dibuat tadi seperti gambar berikut:
Gambar 3.9 Create New Database
79
Maka akan muncul window “Create New Database” dan Isi field sebagai berikut:
Gambar 3.10 Enter Database name
Lalu tekan “OK”
Setelah membuat new database maka langkah selanjutnya membuat tabel cara nya sebagai berikut:
Gambar 3.11 Create Table
80
Berikut tabel-tabel system survey kepuasan pelanggan berserta nama kolom,type data, panjang dan indexnya : a. Tabel “master_data”
Gambar 3.12 Master Data b. Table “master_devices”
Gambar 3.13 Master Devices c. Table “Master_status”
Gambar 3.14 Master Status Berikut Configurasi koneksi ke Mysql : Public Sub buat_koneksi() '//error traping On Error GoTo buat_koneksi_Error '/isi variable db_name = "db_skripsi" db_server = "localhost" 'ganti jika server anda ada di komputer lain db_port = "3306" 'default port is 3306 db_user = "root" 'sebaiknya pakai username lain. db_pass = "" '/buat connection string
81
ConnString = "DRIVER={MySQL ODBC 3.51 Driver};SERVER=" & db_server & ";DATABASE=" & db_name & ";UID=" & db_user & ";PWD=" & db_pass & ";PORT=" & db_port & ";OPTION=3" '/buka koneksi With Conn .ConnectionString = ConnString .Open End With '___________________________________________________________ On Error GoTo 0 Exit Sub buat_koneksi_Error: MsgBox "Ada kesalahan dengan server, periksa apakah server sudah berjalan !", vbInformation, "Cek Server" End Sub Gambar 3.15 Konfigurasi untuk koneksi ke Mysql 3.5. Perancangan System Display Dalam parancangan Software, Form merupakan tampilan pada komputer dari sistem monitoring kepuasan pelanggan ini. Untuk memulai perancangan Form, sebelumnya harus membuka aplikasi Visual Basic 6.0 terlebih dahulu. Untuk membuat tampilan menggunakan visual basic sangat mudah berikut beberapa bagian dari pembuatan GUI pada visual basic, berikut tampilan akan telah dibuat :
Gambar 3.16 Tampilan Awal Form Survey Kepuasan Pelanggan
82
Pada Form tersebut diatas menggunakan beberapa component sebagai berikut : Tabel 3.3 Komponen-komponen yang digunakan pada Visual Basic 6.0 No.
Nama Component
Jumlah
1
Command Button
2
2
Label
3
3
Fusion Chart
4
4
Flex Grid
3
5
Line Header
1
6
Timer
1
7
Windows Media Player
1
Yang mana fungsi-fungsi dari component tersebut yaitu: 1. Line Header berfungsi untuk membuat garis 2. Timer sebagai pengatur interval 100 us untuk mengquery database Mysql. 3. Flex Grid berfungsi untuk temporary data dari hasil query, sebelum ditampilkan dalam bentuk grafik. Label header untuk judul program 4. Label untuk sebagai data sementara sebelum ada perubahan data didatabase. 5. Text Box berfungsi untuk isi konten dari running text
83
6. Button “[]” yang artinya fullscreen untuk membuat tampilan full, ini merupakan settingan default pada saat program dijalakan maka button ini otomatis dieksekusi. 7. Button “[x]” yang artinya exit merupakan menu untuk keluar dari program. 8. Windows media player yang berfungsi untuk memutar suara tetapi tidak ditampilkan. Selain Komponent-komponen yang digunakan pada visual basic, terdapat flowchart pada software tersebut sebagaimana gambar dibawah ini :
Start
84 Play Audio
Inisialisasi
Define Variable
Queary Data ( Sangat Puas)
Play Audio 2
Setting object
Grafik Bulanan Queary Data ( Puas )
Setting FullScreen
Grafik MIngguan Queary Data ( Tidak Puas )
Time Enable
Grafik Harian Query Data
Grafik Tahunan
A=0 If Data 1 = data sebelumnya
Yes s A=A+1
No If ( A > 0)
Cek Status Sound = 1
Yes s
No
Gambar 3.17 Flowchart Pada Visual Basic 6.0
85
Pada form menu setting ada beberapa yang perlu diketahui untuk potongan scriptnya sebagai berikut: Berikut script data untuk melakukan koneksi dilakukan oleh fungsi : Public Sub buat_koneksi() '//error traping On Error GoTo buat_koneksi_Error '/isi variable db_name = "db_skripsi" db_server = "localhost" 'ganti jika server anda ada di komputer lain db_port = "3306"
'default port is 3306
db_user = "root"
'sebaiknya pakai username lain.
db_pass = "" '/buat connection string ConnString = "DRIVER={MySQL ODBC 3.51 Driver};SERVER=" & db_server & ";DATABASE=" & db_name & ";UID=" & db_user & ";PWD=" & db_pass & ";PORT=" & db_port & ";OPTION=3" '/buka koneksi With Conn .ConnectionString = ConnString .Open End With '___________________________________________________________ On Error GoTo 0 Exit Sub
86
buat_koneksi_Error: MsgBox "Ada kesalahan dengan server, periksa apakah server sudah berjalan !", vbInformation, "Cek Server" End Sub Berikut script program untuk Query Data Week : sql = "" sql = "select count(a.status_kepuasan) as total from master_data a " sql = sql + "inner join master_status b " sql = sql + "on a.status_kepuasan = b.id " sql = sql + "where left(a.date_time,10) between '" & weekfrom(iii) & "' and '" & weekuntil(iii) & "' and a.status_kepuasan ='" & id_status & "'" sql = sql + "order by a.date_time" Rs_data.Open sql, Conn, adOpenDynamic, adLockOptimistic Berikut Script program untuk Query sql ke database untuk mencari harian : sql = "" sql = "select left(a.date_time,10)as tgl,b.nama_status,count(a.status_kepuasan) as total from master_data a " sql = sql + "inner join master_status b " sql = sql + "on a.status_kepuasan = b.id " sql = sql + "where left(a.date_time,10) between '" & date_from & "' and '" & today & "' and a.status_kepuasan ='" & id_status & "'" sql = sql + "group by left(a.date_time,10),b.nama_status "
87
sql = sql + "order by a.date_time" Rs_data.Open sql, Conn, adOpenDynamic, adLockOptimistic Berikut script program untuk Query sql ke database untuk mencari mingguan : sql = "" sql = "select count(a.status_kepuasan) as total from master_data a " sql = sql + "inner join master_status b " sql = sql + "on a.status_kepuasan = b.id " sql = sql + "where left(a.date_time,10) between '" & weekfrom(iii) & "' and '" & weekuntil(iii) & "' and a.status_kepuasan ='" & id_status & "'" sql = sql + "order by a.date_time" Rs_data.Open sql, Conn, adOpenDynamic, adLockOptimistic Berikut script program untuk Query sql ke database untuk mencari bulanan : sql = "" sql = "select count(a.status_kepuasan) as total from master_data a " sql = sql + "inner join master_status b on a.status_kepuasan = b.id " sql = sql + "where left(a.date_time,10) between '" & yy & "-" & mm & "-01' and '" & yy & "-" & mm & "-30' " sql = sql + "and a.status_kepuasan ='" & id_status & "' " sql = sql + "order by a.date_time " Rs_data.Open sql, Conn, adOpenDynamic, adLockOptimistic Perancangan dan Pembuatan program voice player
88
Pada perancang program Voice player diperlukan komponen pendukung dari visual basic, yaitu windows media player yang ada di component visual basic, seperti yang terlihat digambar dibawah ini :
Gambar 3.18 Windows Media Player Public Sub play_audio() With Form1.WindowsMediaPlayer1 .URL = "C:\sourcode TA\ok\trims.wav" .Controls.Play .Settings.volume = 100 End With End Sub Dari script diatas berfungsi untuk memainkan Nada sesuai Url dan akan kembali mengeluarkan suara apabila ada kita menekan push button. Selain itu, ada beberapa bagian yang menjadi point-point penting perancangan GUI , berikut point –point dan penjelasan nya:
Full Screen : agar tampilan layar penuh maka script yang dibuatkan sebagai berikut:
Gambar 3.19 Script Full Screen
