BAB IV PENGUJIAN DAN PEMBAHASAN

Transkripsi

1 BAB IV PENGUJIAN DAN PEMBAHASAN 4.1 Merancang Dan Membuat Alat Monitoring Menggunakan Web Pengujian sub bab ini menjelaskan mengenai langkah-langkah program untuk menghubungkan arduino ke web server dan untuk menyimpan data hasil pembacaan sensor yang sudah di olah oleh arduino dan di simpan ke database server Pengujian Rangkaian Pengendali Utama Pengujian ini dilakukan untuk mengetahui apakah rangkaian pengendali utama dalam hal ini Arduino Uno dengan Ethernet Shield dapat berfungsi dengan baik atau tidak. Pengujian meliputi koneksi Arduino dengan serial port komputer serta pengujian dengan ditambahkannya Ethernet Shield di atas papan Arduino. Tujuannya adalah untuk menambah kemampuan Arduino agar terhubung ke jaringan komputer. Untuk pengujian koneksi Arduino, kabel USB dihubungkan dari komputer ke serial Arduino, selanjutnya software IDE Arduino dijalankan. Jika Arduino telah terhubung dengan komputer maka ada IDE Arduino akan memberikan tanda koneksi serial port pada komputer yang digunakan Arduino. Sedangkan untuk pengujian dengan Ethernet Shield, modul dihubungkan diatas papan Arduino. Digunakan kabel UTP dengan konektor RJ-45 yang di cramping crossover untuk menghubungkan localhost komputer dengan Ethernet Shield. Selanjutnya pada IDE Arduino di-upload program examples dari library Ethernet, alamat IP komputer dengan Ethernet Shield disesuaikan agar satu jaringan. Jika Arduino bekerja dengan baik maka jika dilihat pada serial monitor IDE Arduino akan tertampil connected, dan pada titlebar serial monitor terdapat port yang digunakan oleh Arduino seperti pada gambar 4.1 di bawah ini. 40

2 Pengujian Penampilan Sensor Serial Monitor Gambar 4.1 serial monitor Arduino Pada pengujian ini kabel USB dihubungkan dari komputer ke serial Arduino, Selanjutnya software IDE Arduino dijalankan Jika Arduino telah terhubung siapkan program yang akan dieksekusi oleh Arduino pada pengujian penampilan sensor kita menggunakan library yang sudah terdapat pada sofware IDE Arduino menggunakan program example library New Ping untuk proses pembacaan sensor. Program tersebut dilakukan untuk mengetahui pembacaan sensor yang di tampilkan pada serial monitor apabila yang di tampilkan sesuai dengan apa yang di baca (dalam hal ini sensor membaca jarak ketinggian air) maka sensor bekerja dengan baik. // Example NewPing library sketch that does a ping about 20 times per second. #include <NewPing.h>

3 42 #define TRIGGER_PIN 6 // Arduino pin tied to trigger pin on the ultrasonic sensor. #define ECHO_PIN 7 // Arduino pin tied to echo pin on the ultrasonic sensor. #define MAX_DISTANCE 200 // Maximum distance we want to ping for (in centimeters). Maximum sensor distance is rated at cm. NewPing sonar(trigger_pin, ECHO_PIN, MAX_DISTANCE); // NewPing setup of pins and maximum distance. void setup() { Serial.begin(115200); // Open serial monitor at baud to see ping results. } void loop() { delay(50)// Wait 50ms between pings (about 20 pings/sec). 29ms should be the shortest delay between pings. unsigned int us = sonar.ping(); // Send ping, get ping time in microseconds (us). Serial.print("Ping: "); Serial.print(uS / US_ROUNDTRIP_CM); // Convert ping time to distance in cm and print result (0 = outside set distance range) Serial.println("cm"); } Gambar 4.2 Hasil pembacaan sensor

4 43 Pada gambar 4.2 di atas merupakan hasil pembacaan sensor. Pembacaan sensor di katakan dengan baik apabila data yang di baca oleh sensor sama dengan yang di tampilkan pada serial monitor Implementasi Database Sebelumnya definisi database atau basis data. Menurut Wikipedia.org adalah kumpulan informasi yang disimpan di dalam komputer secara sistematik sehingga dapat diperiksa menggunakan suatu program komputer untuk memperoleh informasi dari database tersebut. Di implementasi ini menjelaskan mengenai langkah-langkah dalam pembuatan databases serta struktur tabel dari database yang digunakan dalam proyek akhir adalah sebagai berikut: Pengoperasian XAMPP Pada pengoprasian kali ini buka software XAMPP dan aktifkan module Apache dan modul MySQL untuk membuat database. Gambar 4.3 XAMPP Control Panel

5 44 Pada XAMPP control panel seperti gambar 4.3 terdapat beberapa module yang dapat digunakan untuk menjalankan server, tetapi pada pengujian kali ini hanya menggunakan Apache dan MySQL. Apache sebagai web server yang digunakan untuk menerima dan mengirim hasil pembacaan sensor. MySQL sebagai tempat penyimpanan data hasil pembacaan sensor yang dikirimkan oleh web server. Untuk mengecek apakah web server telah aktif, buka browser ketik bisa juga langsung mengetikan ip address ( ). Maka akan terlihat tampilan seperti gambar 4.4 Gambar 4.4 Tampilan awal localhost XAMPP standart Gambar di atas menunjukan bahwa Apache dan MySQL dapat menerima dan mengirim hasil dari pembacaan sensor dan untuk melanjutkan membuat database masuk ke tools phpmyadmin.

6 Pengujian Database Pada pengujian ini database sebagai penyimpanan data hasil pembacaan sensor yang akan dipanggil oleh web client untuk menampilkan level tinggi air dan grafik. Gambar 4.5 Stuktur tabel sensor Pada gambar 4.5 merupakan struktur database yang digunakan untuk menyimpan data hasil pengiriman dari Arduino melalui HTTP client ke web server. Id berisi nomer urut data yang masuk kedalam database. Sensor berisi nilai pembacaan sensor berupa nilai level ketinggian air. Waktu berisi tanggal, jam, menit, dan detik saat nilai level ketinggian air direkam oleh database. Program Pengiriman hasil sensor ke web browser: Pada program ini adalah program dimana hasil data yang sudah di olah akan di kirimkan ke web server untuk disimpan ke database. // send the HTTP GET request: String getvar = "GET /unta/input_sensor.php?sensor="; getvar += hasilsensor; getvar += " HTTP/1.1"; client.println(getvar); client.println("host: "); client.println("user-agent: arduino-ethernet"); client.println("connection: close"); client.println(); // note the time that the connection was made:

7 46 lastconnectiontime = millis(); } else { // if you couldn't make a connection: Serial.println("connection failed"); Serial.println("disconnecting."); client.stop(); } } Program koneksi database: Berikut adalah program untuk melakukan koneksi database <?php $conn = mysqli_connect('localhost', 'root', '', 'sensor') or die('can\'t connect to mysql'); return $conn; Program pengambilan data sensor input_sensor.php: <?php $link = include 'conn.php'; if (!empty($_get)){ $data = $_GET; $link->query('insert INTO sensor(sensor) VALUES("'. $data['sensor'].'")'); } else { echo 'No data available'; } pada program ini digunakan untuk penyimpanan data hasil pembacaan sensor yang diterima oleh web server dan selanjutnya data hasil pembacaan sensor di masukan ke database. Seperti pada gambar 4.6

8 47 Gambar 4.6 Penyimpanan pada atribut sensor Data id dan waktu ditentukan pada saat data sensor masuk ke database secara otomatis mengikuti data sensor.

9 Proses Pergantian Lampu Indikator Dan Petingatan Alarm Pada pengujian kali ini koneksikan arduino, kabel USB dihubungkan dari komputer ke serial Arduino dan Ethernet shield jika arduino telah terhubung maka secara otomatis lampu indikator akan menyala sesuai dengan perintah pada program dan data sensor otomatis akan masuk ke dalam database Pengujian Lampu Indikator Warna Biru Berikut program lampu indikator jika level air kurang dari 5 cm maka lampu biru menyala. if (hasilsensor <=5) // jika hasil sensor kurang dari 5 Menujukan Bahwa level tinggi air dalam keadaan aman. { digitalwrite(merah,low); //Lampu warna merah mati. digitalwrite(biru,high); //Lampu warna biru menyala. digitalwrite(kuning,low); //Lampu warna kuning mati. digitalwrite(hijau,low); //Lampu warna hijau mati. digitalwrite(buzzer,low); //Alarm mati. } Program diatas merupakan program dari arduino untuk menyalakan lampu indikator berwarna biru, lampu indikator berwarna biru merupakan lampu untuk menginformasikan bahwa level tinggi air dalam batas aman level tinggi air dalam batas aman berjarak kurang dari 5cm. seperti hasil pengujian pada gambar 4.7

10 49 Gambar 4.7 Pengujian lampu indikator warna biru Gambar diatas merupakan hasil pengujian jika level tinggi air kurang dari 5 cm maka lampu indikator berwarna biru akan otomatis menyala dan jika level tinggi air lebih dari 5 cm maka secara otomatis lampu idikator akan menyala sesuai batas dan lampu yang digunakan untuk meberikan informasi level tinggi air Pengujian Lampu Indikator Warna Hijau Berikut program lampu indikator jika level air lebih dari 5 cm dan kurang dari 10 cm maka lampu hijau menyala. else if ((hasilsensor >5)&&(hasilSensor<=10))// jika level tinggi air lebih dari 5cm dan kurang dari 10 cm maka statusnya Siaga1 { digitalwrite(kuning,high); // Lampu warna kuning mati. digitalwrite(merah,low); // Lampu warna merah mati. digitalwrite(biru,low); // Lampu warna biru mati. digitalwrite(hijau,low); // Lampu warna hijau menyala. digitalwrite(buzzer,low); // Alarm mati.

11 50 Program diatas merupakan program dari arduino untuk menyalakan lampu indikator berwarna biru, lampu indikator berwarna hijau merupakan lampu untuk menginformasikan bahwa level tinggi air dalam batas Siaga 1 level tinggi air dalam batas aman berjarak kurang dari 5 cm dan kurang dari 10 cm. seperti hasil pengujian pada gambar 4.8 Gambar 4.8 Pengujian lampu indikator warna hijau Gambar diatas merupakan hasil pengujian jika level tinggi air lebih dari 5 cm dan kurang dari 10 cm maka lampu indikator berwarna hijau akan otomatis menyala dan jika level tinggi air lebih dari 10 cm maka secara otomatis lampu indikator akan menyala sesuai batas dan lampu yang digunakan untuk memberikan informasi level tinggi air Pengujian Lampu Indikator Warna Kuning Berikut program lampu indikator jika level air lebih dari 10 cm dan kurang dari 17 cm maka lampu kuning menyala. else if ((hasilsensor >10)&&(hasilSensor<=17))// jika level tinggi air lebih dari 10 cm dan kurang dari 17 cm maka statusnya Siaga2. {

12 51 digitalwrite(kuning,high); // Lampu warna kuning menyala. digitalwrite(merah,low); // Lampu warna merah mati. digitalwrite(biru,low); // Lampu warna biru mati. digitalwrite(hijau,low); // Lampu warna hijau mati. digitalwrite(buzzer,low); // Alarm mati. } Program diatas merupakan program dari arduino untuk menyalakan lampu indikator berwarna kuning, lampu indikator berwarna kuning merupakan lampu untuk menginformasikan bahwa level tinggi air dalam batas aman level tinggi air dalam batas aman berjarak lebih dari 10 cm kurang dari 17 cm. seperti hasil pengujian pada gambar 4.9 Gambar 4.9 Pengujian lampu indikator warna kuning Gambar diatas merupakan hasil pengujian jika level tinggi air kurang dari 10 cm maka lampu indikator berwarna kuning akan otomatis menyala dan jika level tinggi air lebih dari 17 cm maka secara otomatis lampu indikator akan menyala sesuai batas dan lampu yang digunakan untuk memberikan informasi level tinggi air.

13 Pengujian Lampu Indikator Warna Merah Dan Alarm Berikut program lampu indikator jika level air lebih dari 17 cm maka lampu merah dan alarm menyala. else if (hasilsensor >17)//jika ketinggian air lebih dari 17 cm maka statusnya Berbahaya { } digitalwrite(merah,high);//lampu warna merah meyala digitalwrite(buzzer,high);//alarm Menyala digitalwrite(biru,low); // Lampu warna biru mati digitalwrite(kuning,low);// Lampu warna kuning mati digitalwrite(hijau,low);// Lampu wara hijau mati Gambar 4.10 Pengujian lampu indikator warna merah Gambar diatas merupakan hasil pengujian jika level tinggi air lebih dari 17 cm maka lampu indikator berwarna merah dan alarm akan otomatis menyala.

14 Proses Penampilan Data Grafik dan Peringatan Level Tinggi Air Pada pengujian kali ini koneksikan arduino, kabel USB dihubungkan dari komputer ke serial Arduino dan Ethernet shield jika arduino telah terhubung maka secara otomatis lampu indikator akan menyala sesuai dengan perintah pada program dan data sensor otomatis akan masuk ke dalam database Pegujian Data Realtime Pada pengujian data realtime ini adalah untuk menampilkan data level tinggi air dan grafik secara realtime, dimana data tersebut diambil dari database. Untuk melakukan pengujian data realtime membutuhkan sebuah program untuk mengambil data dari database berikut ini adalah program- program proses pengambilan data dari database. Program koneksi.php: <?php mysql_connect("localhost", "root", ""); mysql_select_db("sensor");?> Dimana program tersebut untuk mengkoneksikan ke MySQL server untuk mengambil data dari database sensor. Program tampil.php: <?php include("koneksi.php"); $sql = mysql_query("select * FROM sensor ORDER BY id DESC LIMIT 0, 1 "); $result = array(); //Memilih semua data pada tabel sensor dengan urutan Id while($row = mysql_fetch_array($sql)){

15 54 array_push($result, array('waktu' => $row[0], 'sensor' => $row[1], 'id' => $row[2])); } echo json_encode(array("result" => $result)); Dimana program tampil.php ini untuk menampilkan semua data pada table sensor dan di urutkan melalui atribut id yang terdapat pada tabel sensor. Dan data tersebut diubah menjadi data JSON dan selanjutnya data tersebut akan di panggil oleh javascript. Program tampil.js: $(document).ready(function() { selesai();}); function selesai() { settimeout(function() { update(); selesai();}, 1000);} function update() { Gambar 4.11 Data JSON $.getjson("tampil.php", function(data) { $("ul").empty(); $.each(data.result, function() { $("ul").append("<li>id:"+this['id']+"</li><li>waktu:"+ this['waktu'+"</li> <li> Sensor : "+this['sensor']+"</li><br />");}); });}

16 55 Program tampil.js untuk mengambil data yang diubah menjadi data JSON pada file (tampil.php) dan setiap masing-masing fungsi dari hasil data ditambahkan dan diurutkan melalui id, waktu dan sensor seperti pada gambar Program data.php : <?php Gambar 4.12 tampilan javascript $con = mysql_connect("localhost","root",""); if (!$con) { } die('could not connect: '. mysql_error()); mysql_select_db("sensor", $con); $sth = mysql_query("select * FROM sensor order by id desc limit 10"); $rows = array(); $rows['name'] = 'sensor'; while($r = mysql_fetch_array($sth)) { } $rows['data'][] = $r['sensor']; $result = array(); array_push($result,$rows); print json_encode($result, JSON_NUMERIC_CHECK);

17 56 mysql_close($con);?> Program data.php untuk merubah nilai variabel array menjadi data JSON dan untuk di tampilkan dalam bentuk grafik oleh highchart Pengujian Grafik: Pada pengujian grafik ini menggunakan file (datas.php) untuk mengambil data dari database dan di pangil oleh highchart yang berada pada file (datasensor.php) untuk di jadikan ke dalam grafik. <script> $(function(){ $(document).ready(function(){ // data posisi x dan y terakhir var ulx, uly ; // ajax untuk mengambil data $.ajax({ url : 'php/datas.php', type : 'get', success : function(databaru){ $.each(databaru, function(i,o){ if(o.x) databaru[i].x = parseint(o.x) ; if(o.y) databaru[i].y = parsefloat(o.y) ; console.log(databaru[i].x) ; }) ; // mengeset data x dan y terakhir var xdef = databaru[databaru.length-1].x ; setx(xdef) ; console.log(ulx) ; sety(databaru[databaru.length-1].y) ;

18 57 // tampilkan data ke dalam bentuk chart di div id container Highcharts.chart('container', { chart : { type : 'spline', animation : Highcharts.svg, marginright : 10, events : { load : function(){ series = this.series[0] ; console.log("series berisi ", this.series[0]) ; }}}, // judul dari chart nya title : { text : 'Grafik Pemantauan Ketinggian Air'}, xaxis : {tickpixelinterval : 150}, yaxis : {title : {text : 'Level Tinggi Air', plotlines : [{value : 0, width : 1, color : '#808080'}]}}, tooltip: { formatter: function () { return'<b>'+this.series.name+'</b><br/>'+'id:'+highcharts.numberform at(this.x,0)+ '<br/>' +'Tinggi : ' + Highcharts.numberFormat(this.y, 2) +'cm'; } }, legend : {enabled : false}, exporting : {enabled : false}, // set seri data di awal kali ambil data series : [{name : 'Level Tinggi Air', data : databaru}]})}})}) ; // fungsi untuk menambahkan data secara dinamis setinterval(function(){ $.get('php/datas.php?data=1', function(databaru){ var xlast = parsefloat(databaru[0].x) ;

19 58 var ylast = parsefloat(databaru[0].y) ; // jika data x dan y terakhir beda, maka update chart if(getx()!= xlast && gety!= ylast){ series.addpoint([xlast, ylast], true, true) ; setx(xlast) ; console.log(ulx) ; sety(ylast) ; if(ylast <5) $('#info-alert').fadein() ; else $('#info-alert').fadeout() ; if((ylast > 5) && (ylast<=10)) $('#success-alert').fadein() ; else $('#success-alert').fadeout() ; if((ylast > 10) && (ylast<=17)) $('#warning-alert').fadein() ; else $('#warning-alert').fadeout() ; if(ylast > 17) $('#danger-alert').fadein() ; else $('#danger-alert').fadeout() ;}}); },1000) ; // fungsi untuk mengeset x/y atau data titik terakhir function getx(){return ulx;} function gety(){return uly;} function setx(xbaru){ ulx = xbaru ;}

20 59 function sety(ybaru){ uly = ybaru ;} }); </script> Fungsi kode diatas adalah untuk mendapatkan data yang sudah diubah menjadi data JSON pada file (data.php). Dimana pada data yang sudah diubah tersebut akan di jadikan ke dalam bentuk grafik seperti pada gambar Gambar 4.13 Grafik Realtime Pada gambar 4.14 merupakan grafik secara realtime. Dimana grafik tersebut untuk mengetahui ketinggian air yang terbaca oleh sensor. Pada proses pembacaanya, yaitu dengan mengambil data terbaru yang di rekam oleh database. Pada sumbu Y merupakan nilai tinggi air dalam satuan (Cm) dan sumbu X pencuplikan data berdasarakan id pada database Pengujian Program Alert Pada pengujian kali ini menggunakan alert, alert berfungsi untuk memberikan pesan atau umpan balik ke pengguna atas tindakan yang dilakukan oleh pengguna. Pada pengujian kali ini mengggunakan alert untuk memberikan pesan informasi kepada pengguna. Untuk pengujian koneksi arduino dan kabel usb di hubungkan ke port arduino selanjutnya hubungkan kabel Ethernet dari komputer ke Ethernet shield yang sudah dihubungkan dengan arduino dan mikrokontroler.

21 Pengujian Program Alert info Pada pengujian alert info ini dilakukan untuk mengetahui level ketinggian air berupa grafik dan memberikan peringatan ketika level tinggi air berada dibawah 5 cm maka secara otomatis muncul pemberitahuan berupa alert warna biru pada web. Jika program bekerja dengan baik maka akan tampil seperti gambar 4.14 Gambar 4.14 Peringatan jika level tinggi air masih dalam batas aman Pada gambar 4.14 merupakan pemberitahuan jika level tinggi air dibawah 5 cm maka pesan yang akan ditampilkan Ketinggian air masih dalam batas aman! didalam alert berwarna biru untuk memunculkan alert berwarna biru dengan memberikan perintah sebagai berikut. Program Alert kurang dari 5 cm <div class="alert-info" id="info-alert"><span class="closebtned" onclick="this.parentelement.style.display='none';"> </sp an> ketinggian air masih dalam batas aman!</div>

22 61 Gambar 4.15 Program alert-info pada script highchart jika level tinggi air kurang dari 5 cm Pengujian Program Alert Success Pada pengujian alert success ini dilakukan untuk mengetahui level ketinggian air berupa grafik dan memberikan peringatan ketika level tinggi air berada diatas 5 cm dan kuang dari 10 maka secara otomatis muncul pemberitahuan berupa alert warna hijau pada web. Jika program bekerja dengan baik maka akan tampil seperti gambar 4.16 Gambar 4.16 Peringatan jika level tinggi air Siaga 1

23 62 Pada gambar 4.16 merupakan pemberitahuan jika level tinggi air diatas 5 cm dan kurang dari 10 cm maka pesan yang akan ditampilkan Perhatian Ketinggian Air Siaga 1! untuk menampilkan alert berwarna biru dengan memberikan perintah sebagai berikut. Program Alert lebih dari 5 cm dan kurang dari 10 cm <div class="alert-success" id="success-alert"> <span class="closebtned" onclick="this.parentelement.style.display='none';"> </sp an> Perhatian Ketinggian air siaga 1!</div> Gambar 4.17 Program alert-success pada script highchart jika level tinggi air lebih dari 5 cm dan kurang dari 10 cm Pengujian Program Alert Warning Pada pengujian alert warning ini dilakukan untuk mengetahui level ketinggian air berupa grafik dan memberikan peringatan ketika level tinggi air berada diatas 10 cm dan kuang dari 17 maka secara otomatis muncul pemberitahuan berupa

24 63 alert warna kuning pada web. Jika program bekerja dengan baik maka akan tampil seperti gambar 4.18 Gambar 4.18 Peringatan jika level tinggi air siaga 2 Pada gambar 4.18 merupakan pemberitahuan jika level tinggi air diatas 10 cm dan kurang dari 17 cm maka pesan yang akan ditampilkan Perhatian Ketinggian Air Siaga 2! untuk menampilkan alert berwarna kuning dengan memberikan perintah sebagai berikut. Program Alert lebih dari 10 cm dan kurang dari 17 cm <div class="alert-warning" id="warning-alert"> <spanclass="closebtned"onclick="this.parentelement.style.displ ay='none';"> </span> Perhatian Ketinggian air siaga 1!</div>

25 64 Gambar 4.19 Program alert-warning pada script highchart jika level tinggi air lebih dari 10 cm dan kurang dari 17 cm Pengujian Program Alert Danger Pada pengujian alert danger ini dilakukan untuk mengetahui level ketinggian air berupa grafik dan memberikan peringatan ketika level tinggi air berada diatas 17 cm maka secara otomatis muncul pemberitahuan berupa alert warna merah pada web. Jika program bekerja dengan baik maka akan tampil seperti gambar 4.20 Gambar 4.20 Peringatan jika level tinggi melebihi batas aman

26 65 Pada gambar 4.20 merupakan pemberitahuan jika level tinggi air diatas 17 cm maka pesan yang akan ditampilkan Perhatian Ketinggian Air melebihi batas aman! untuk menampilkan alert berwarna merah dengan memberikan perintah sebagai berikut. Program Alert lebih dari 17 cm <div class="alert-dangger" id="dangger-alert"> <span class="closebtned" onclick="this.parentelement.style.display='none';"> </sp an> Perhatian Ketinggian air melebihi batas aman!</div> Gambar 4.21 Program alert-dangger pada script highchart jika level tinggi air lebih dari 17 cm 4.4 Proses pengambilan data Per Satuan Waktu Secara Realtime Pada pengujian data berdasarkan range digunakan untuk mencari informasi karakteristik Level tinggi air berdasarkan jam, hari, bulan, maupun tahun. Pada menu history ini bisa menjadi acuan untuk melihat karakteristik air yang terbaca oleh sensor dalam setiap harinya. Dengan memasukan tanggal kedalam form maka data yang dimasukan akan tertampil dalam grafik.

27 Pengujian Form Form yang digunakan adalah type date, form tersebut digunakan sebagai pencarian dari tanggal tertentu sampai tanggal tertentu ditentukan oleh client untuk memanggil data yang berada diantara tanggal tersebut. Data yang tertampil berupa grafik dengan keterangan waktu dan nilai level tinggi air. <form name="form" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post"> <p>masukan Tanggal : </p> <p> <input name="tanggal_awal" type="date" size="10" maxlength="15"> <br> <p>sampai Tanggal : </p> <p> <input name="tanggal_akhir" type="date" size="10" maxlength="15"><br> <input type="submit" name="submit" value="kirim" ></p> Gambar 4.22 Form Pencarian Berdasarkan Tanggal

28 67 Pada gambar 4.22 yaitu form untuk mengambil data yang terekam oleh database. Dimana proses pengambilan data tersebut yaitu ketika form di isi dengan tanggal yang dimasukan oleh client. tooltip: { formatter: function() { return '' +'Tanggal'+': ' + this.x +' '+ 'Sensor' + ': '+ this.y + (this.series.name == 'TCH Drop Rate'? '' : ''); } }, Pada program atas adalah program untuk menampilkan tanggal dan nilai tinngi air pada grafik yang diambil dari sumbu X dan sumbu Y. Dimana pada kotakan yang berwana merah ketika cursor diletakan pada grafik maka secara otomatis grafik akan mengeluarkan berupa waktu dan nilai sensor Pengujian Per Jam : Gambar 4.23 Pengujian Level Tinggi Air Per Jam Pada pengujian kali ini dilakukan berdasarkan jam yang akan menampilkan level ketinggian air selama 24 jam. Grafik pada gambar 4.23 menunjukan data yang tersimpan di dalam database.

29 68 Pada sumbu x terdapat tanggal dan waktu berdasarkan data sensor yang di ambil dari database. Pada sumbu y menampilkan jarak level tinggi air dalam satuan centimeter (cm). Garis berwarna kuning merupakan grafik dari data level tinggi air berdasarkan waktu yang dimasukan pada form dan kotakan merah berisi informasi tanggal pengambilan yang di input pada form. Query untuk memanggil database: $sql="select waktu,avg(sensor) as sensor FROM `sensor` where waktu between '$tanggal_awal' and '$tanggal_akhir' group by hour(waktu) "; Query diatas adalah untuk mengambil data pada atribut waktu dan sensor. Dimana pada atribut sensor tersebut di average (rata-rata) berdasarkan tangal yang dimasukan pada form. Pada query (group by hour) maksudnya pengambilan data per jam Pengujian Per Hari : Gambar 4.24 Pengujian Level Tinggi Air Per Hari Pada pengujian kali ini dilakukan berdasarkan tanggal yang akan menampilkan level ketinggian air dari dan sampai tanggal yang diinginkan. Grafik pada gambar 4.24 menunjukan data yang tersimpan di dalam database.

30 69 Pada sumbu x menampilkan tanggal berdasarkan data sensor yang di ambil dari database. Pada sumbu y menampilkan jarak level tinggi air dalam satuan centimeter (cm). Garis berwarna kuning merupakan grafik dari data level tinggi air berdasarkan waktu yang dimasukan pada form dan kotakan merah berisi informasi tanggal pengambilan yang di input pada form. Query untuk memanggil database: $sql="select date(waktu) as waktu,avg(sensor) as sensor FROM `sensor` where waktu between '$tanggal_awal' and '$tanggal_akhir' group by date(waktu) "; Query diatas menujunkan pengambilan data berdasarkan tanggal yang diinginkan Pengujian Per Bulan: Gambar 4.25 Pengujian Level Tinggi Air Per Bulan

31 70 Pada pengujian kali ini dilakukan berdasarkan pengambilan data per bulan yang akan menampilkan level ketinggian air dari dan sampai bulan yang diinginkan. Grafik pada gambar 4.25 menunjukan data yang tersimpan di dalam database. Pada sumbu x menampilkan bulan dalam bentuk angka berdasarkan data sensor yang di ambil dari database. Pada sumbu y menampilkan jarak level tinggi air dalam satuan centimeter (cm). Garis berwarna kuning merupakan grafik dari data level tinggi air berdasarkan waktu yang dimasukan pada form dan kotakan merah berisi informasi tanggal pengambilan yang di input pada form. Query untuk memanggil database: $sql="select month(waktu) as waktu,avg(sensor) as sensor FROM `sensor` where waktu between '$tanggal_awal' and '$tanggal_akhir' group by month(waktu) "; Query di atas hampir sama dengan query per jam yang membedakan hanya pada pengambilan berdasarkan bulan pada atribut waktu dan sumbu X. Dimana pada sumbu X hanya menampilkan bulannya saja tanpa menampilkan waktu. Pada pengujian ini pengambilan level tinggi air berdasarkan bulan yang dimasukan ke dalam form Pengujian Per Tahun: Pada pengujian kali ini dilakukan berdasarkan pengambilan data per tahun yang akan menampilkan level ketinggian air dari dan sampai tahun yang ditentukan. Grafik pada gambar 4.26 menunjukan data yang tersimpan di dalam database.

32 71 Gambar 4.26 Pengujian Level Tinggi Air Per Hari Tahun Pada sumbu x menampilkan tahun dalam bentuk angka berdasarkan data sensor yang di ambil dari database. Pada sumbu y menampilkan jarak level tinggi air dalam satuan centimeter (cm). Garis berwarna kuning merupakan grafik dari data level tinggi air berdasarkan waktu yang dimasukan pada form dan kotakan merah berisi informasi tanggal pengambilan yang di input pada form. Query untuk memanggil database: $sql="select year(waktu) as waktu,avg(sensor) as sensor FROM `sensor` where waktu between '$tanggal_awal' and '$tanggal_akhir' group by year(waktu) "; Query di atas hampir sama dengan query per jam yang membedakan hanya pada pengambilan berdasarkan tahun pada atribut waktu dan sumbu x. Dimana pada sumbu x hanya menampilkan tahun saja tanpa menampilkan waktu. Pada pengujian ini pengambilan level tinggi air berdasarkan tahun yang dimasukan ke dalam form.