BAB III PERANCANGAN ALAT

67

BAB III

PERANCANGAN ALAT

3.1. Block Diagram dari Konfigurasi System

Gambar 3.1 Block Diagram System Sangat puas Tidak Puas Ethernet Module Main Control berbasis Arduino UNO Database Display Suara

Local Area Network (LAN)

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 Sisi Hardware Quantity

1 Arduino UnoR3 + kabel data 1

2 Module Ethernet Arduino Shield 1

3 Kabel LAN (RJ45) 1 Meter

4 Led Hijau 3

6 Resistor 10 kohm – ¼ watt 3

7 Resistor 220 kohm – ¼ watt 3

8 Kabel sisir warna 1 meter 10 pin 1

9 PCB Matric 1

10 Kabel jumper 20

11 Acrylic 1

12 Push Button 3

Selain hardware, ada juga terdapat software yang harus dipersiapkan pula sebagaimana table dibawah ini :

NO Sisi Software

1 Arduino IDE software 2 Visual Basic 6

3 Xampp 1.7.7

4 Fusion Chart for VB

5 Navicat Premium for Mysql 6 Windows media player

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 :

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.

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 :

71

http_request(id,btn_ value,ip_local)

Get : Id_device

Get : IP Local Get : Button State

Print”Connection failed” Get Method URL GET /ta/sync.php?id=id_device &btn_value=Button_state &ip_address=ip_local END If Connected to server No No _No Inisialisai Setup I/0

Delay = 500 Delay = 500 Delay = 500

http_request(id,btn_ value,ip_local) http_request(id,btn_ value,ip_local) http_request(id,btn_ value,ip_local)

LED 1 = HIGH LED 2 = HIGH LED 3 = HIGH

If Button 1 = HIGH If Button 2 = HIGH If Button 3 = HIGH Go to Ulang No Yes Ya

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; // the number of the pushbutton pin const int ledPin1 = 4; // the number of the LED pin

const int buttonPin2 = 6; // the number of the pushbutton pin const int ledPin2 = 3; // the number of the LED pin

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

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);

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:

 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”.

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 :

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:

 Maka akan muncul window “Create New Database” dan Isi field sebagai berikut:

 Lalu tekan “OK”

 Setelah membuat new database maka langkah selanjutnya membuat tabel cara nya sebagai berikut:

Gambar 3.11 Create Table

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”

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

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

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.

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 :

Setting object Setting FullScreen Time Enable Query Data Inisialisasi Define Variable

Queary Data ( Tidak Puas ) Queary Data ( Puas ) Queary Data ( Sangat Puas)

If Data 1 = data sebelumnya A = A + 1 If ( A > 0) Cek Status Sound = 1 Play Audio Play Audio 2 Grafik Bulanan Grafik MIngguan Grafik Harian Grafik Tahunan A = 0 Yes s No Yes s No

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

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 + "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

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 :

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.18 Windows Media Player