Laporan
Laporan
Oleh:
Oleh:
i
LEMBAR PENGESAHAN LAPORAN PKL
SISTEM MOITORING EVAPORASI PADA PANCI PENGUAPAN
BERBASIS ANDROID
BMKG STASIUN METEOROLOGI MARITIM PERAK SURABAYA
OLEH :
MENYETUJUI
DOSEN PEMBIMBING
Mohammad Erik Echsony, S.ST., M.T. Dirvi Eko Juliando S., S.Pd., M.T.
NIP. 19860118201404001 NIP. 198307272014041001
ii
LEMBAR PENGESAHAN LAPORAN PKL
SISTEM MONITORING EVAPORASI PADA PANCI PENGUAPAN
BERBASIS ANDROID
BMKG STASIUN METEOROLOGI MARITIM PERAK SURABAYA
iii
ABSTRAK
iv
KATA PENGANTAR
v
Dengan menyadari atas terbatasnya ilmu yang kami miliki, apabila nantinya
terjadi kekeliruan dalam penulisan laporan praktek kerja ini, penulis memohon
maaf sebesar-besarnya dan mengharapkan kritik dan saran yang membangun untuk
menyempurnakan laporan ini.
Akhir kata semoga laporan praktik kerja lapangan ini dapat memberikan
banyak manfaat bagi kita semua. Atas perhatiannya penulis mengucapkan banyak
terima kasih.
Penulis
vi
DAFTAR ISI
HALAMAN
JUDUL .............................................................................
................. i
ABSTRAK ...........................................................................
................................. iv
KATA
PENGANTAR .........................................................................
.................. v
DAFTAR
ISI ...............................................................................
......................... vii
DAFTAR
GAMBAR ............................................................................
................. x
DAFTAR
TABEL .............................................................................
.................. xii
DAFTAR
LAMPIRAN ..........................................................................
............ xiii
BAB 1-
PENDAHULUAN .......................................................................
.............. 1
1.1 Latar
Belakang ..........................................................................
................... 1
1.2 Perumusan
Masalah ...........................................................................
.......... 2
1.3 Tujuan dan
Manfaat ...........................................................................
.......... 2
1.3.1
Tujuan ............................................................................
.................... 2
1.3.2
Manfaat ...........................................................................
................... 3
1.4 Ruang Lingkup
Pembahasan ........................................................................
3
1.5 Metodologi
Penulisan .........................................................................
......... 3
1.5.1
Wawancara..........................................................................
............... 4
1.5.2
Observasi .........................................................................
.................. 4
1.5.3 Penelitian
Kepustakaan ......................................................................
4
1.6 Sistematika
Penulisan .........................................................................
......... 4
BAB I :
PENDAHULUAN .......................................................................
4
BAB II : GAMBARAN UMUM PERUSAHAAN ................................. 4
BAB III : LANDASAN
TEORI ................................................................ 4
BAB IV : ANALISA DAN
PEMBAHASAN ........................................... 5
BAB V :
PENUTUP ...........................................................................
..... 5
BAB II-GAMBARAN UMUM PERUSAHAAN ................................................ 6
vii
2.1 Sejarah BMKG Stasiun Meteorologi Maritim Perak Surabaya ...................
6
2.2 Struktur
Organisasi ........................................................................
.............. 7
2.3 Visi dan
Misi ..............................................................................
.................. 8
2.4 Lokasi BMKG Stasiun Meteorologi Maritim Perak Surabaya ....................
9
BAB III-LANDASAN
TEORI ...........................................................................
10
4.1 Blok
Diagram ...........................................................................
.................. 20
4.2 Rangkaian
Hardware ..........................................................................
....... 20
4.2.1 Gambar
Rangkaian .........................................................................
. 20
4.2.2 Rangkaian
PCB ...............................................................................
. 21
4.3 Arduino
IDE ...............................................................................
................ 21
4.3.1 Listing
Program............................................................................
.... 22
4.3.2 Serial
Monitor ...........................................................................
....... 22
4.4 PHP MyAdmin dan Database
MySQL ....................................................... 22
4.5
Server ............................................................................
............................. 23
4.5.1
Koneksi.php .......................................................................
.............. 24
4.5.2
Database.php ......................................................................
.............. 24
4.5.3
Dataline.php ......................................................................
............... 24
4.5.4
Indexpenguapan.php ................................................................
........ 25
4.5.5
Json.php ..........................................................................
................. 26
4.5.6
Hapus.php .........................................................................
............... 27
4.5.7
Printpenguapan.php ................................................................
......... 27
4.6 Web Tampilan
Data ..............................................................................
..... 28
viii
4.7 Aplikasi Android
ATE ...............................................................................
29
4.7.1 Tampilan icon aplikasi
ATE ............................................................ 29
4.7.2 Screen
Login .............................................................................
....... 30
4.7.3 Screen2 (Screen
Data) ..................................................................... 31
4.8
Pengujian .........................................................................
........................... 33
4.8.1 Cara Pengambilan
Data ................................................................... 33
4.8.2 Pengujian
Hardware ........................................................................
34
4.8.3 Pengujian Aplikasi Android
(ATE) ................................................. 36
4.9 Tingkat Kesalahan
(Error) .........................................................................
38
BAB V-
PENUTUP ...........................................................................
................... 40
5.1
Kesimpulan ........................................................................
........................ 40
5.2
Saran .............................................................................
.............................. 40
DAFTAR
PUSTAKA ...........................................................................
............... 41
ix
DAFTAR GAMBAR
x
Gambar 4.18. Tampilan screen
login ........................................................................ 29
Gambar 4.19. Blocks logika screen
1 ........................................................................ 30
Gambar 4.20. Tampilan screen
2 ...............................................................................
30
Gambar 4.21. Blocks logika screen
2 ........................................................................ 31
Gambar 4.22. Prinsip kerja pengambilan
data........................................................... 33
Gambar 4.23. Pengujian incorect screen
login ......................................................... 35
Gambar 4.24. Pengujian screen
login........................................................................ 36
Gambar 4.25. Pengujian button
penguapan ............................................................... 36
Gambar 4.26. Pengujian grafik
pengamatan ............................................................. 37
Gambar 4.27. Pengujian button
logout ...................................................................... 37
xi
DAFTAR TABEL
xii
DAFTAR LAMPIRAN
xiii
BAB 1
PENDAHULUAN
1
2
daerah maupun luar daerah. Oleh karena itu, diperlukan data relevan dan akurat
untuk menghasilkan prakiraan cuaca.
Dalam memperkirakan cuaca, dibutuhkan pengamatan terhadap beberapa
parameter. Salah satunya adalah jumlah uap air pada panci penguapan. BMKG
telah memiliki AWS (Automatic Weather Station) dimana pengamatan dapat
dilakukan secara otomatis. Namun, pada BMKG Stasiun Meteorologi Maritim
Perak, alat belum menjamaah daerah tersebut. Sehingga pengamatan dan
pengukurannya masih dilakukan secara manual. Dimana pengamatan
dilakukan setiap jam 07.00 WIB (00.00 UTC) dengan mendatangi sebuah
tempat yang bernama Taman Alat.
Maka dari itu, pada Praktik Kerja Lapangan ini, kami mendapat tugas
untuk membuat “sebuah peralatan penguapan digital yang bertujuan untuk
dapat mengoptimalkan alat pengamatan yang telah ada namun dengan sistem
yang telah otomatis” (Devis Setyo Nugroho, 2015) dan dapat di amati dengan
akurat dan mudah oleh semua karyawan. Tugas ini berjudul “SISTEM
MONITORING EVAPORASI PADA PANCI PENGUAPAN BERBASIS
ANDROID”.
1.3.2 Manfaat
Berdasarkan tujuan tersebut, maka dapat diidentifikasi beberapa
manfaatnya, diantaranya:
1. Memberikan kesempatan bagi mahasiswa untuk dapat merasakan
dunia kerja.
2. Menerapkan pengetahuan akedemis yang telah diterima dari
Politeknik Negeri Madiun serta lebih dapat memahami konsep-
konsep non-akademis dunia kerja.
3. Melatih diri agar tanggap dan peka dalam menghadapi situasi dan
kondisi lingkungan kerja serta mempersiapkan langkah-langkah
yang diperlukan untuk menyesuaikan diri dengan lingkungan di
masa yang akan datang.
4. Kegiatan Praktek Kerja Lapangan ini diharapkan
dapat
menambahkan kemampuan dan wawasan praktis mahasiswa.
Sehingga kedepannya menghasilkan kualitas lulusan yang
dibutuhkan di pasar kerja.
1.5.1 Wawancara
Wawancara dilakukan untuk mendapatkan penjelasan yang tepat
mengenai tujuan dilakukannya pengukuran uap air, kaitannya dengan
prakiraan cuaca, serta sistem pengukuran uap air pada BMKG Stasiun
Meteorologi Maritim Perak Surabaya dengan bertanya kepada
pembimbing PKL serta divisi yang bekerja.
1.5.2 Observasi
Observasi dilakukan dengan pengamatan secara langsung mengenai
sistem pengukuran uap air secara manual dan cara kerja alat
pengukuran uap air pada divisi observasi di BMKG Stasiun
Meteorologi Maritim Perak Surabaya.
1.5.3 Penelitian Kepustakaan
Penelitian yang bertujuan mengumpulkan data-data yang
mendukung serta mempunyai kaitan dengan laporan praktek yang
bersifat teori.
6
7
Gambar 2.2 Struktur Organisasi BMKG Stasiun Meteorologi Maritim Perak Surabaya
8
10
11
tabung peredam riak. Untuk mengukur dan membaca skalanya, maka tabung
pengaman didekatkan ke panci dengan maksud agar permukaan air tetap
tenang dan tidak terlalu bergelombang. Sesudah itu sekrup patrol diputar
sambil melihat ujung panci dari hungging di dalam tabung pengaman. Skrup
pengontrol yaitu berada di atas penyangga hugging berfungsi untuk menaikkan
atau menurunkan skala. Jika skrup itu diputar kembali ke kanan maka tiang
skala turun angka yang dibaca adalah angka yang terdapat tegak lurus dengan
sekrup pengontrol. Adapun skala yang tertera pada skala adalah angka (1)
sampai (100).
“Penggunaan open pan evaporimeter sebenarnya memiliki beberapa
persyaratan, diantaranya mempertahankan tinggi permukaan air agar tetap 5
cm dari bibir panci untuk setiap kali pengamatan. Hal tersebut terlihat cukup
sederhana namun cukup menyulitkan untuk diterapkan dilapangan, karena
harus dilakukan setiap hari secara terus-menerus. Sehingga persyaratan
tersebut sering diabaikan, walau sebenarnya cukup berpengaruh terhadap data
penguapan yang dihasilkan” (Ibnu Sofyan Lukito, 2010).
stabil. Sensor ini sudah tersedia modul trasmitter dan receiver gelombang
ultrasonik. Berikut ini spesifikasi dari sensor HC-SR04.
Tabel 3.1 Spesifikasi Sensor HC-SR04
Power Supply +5V DC
Arus daya 15mA
Sudut efektif <15°
Pembacaan jarak 2cm – 400cm
Pengukuran Sudut 30°
𝑠= ...................................................................
.............................. (1)
2
Dimana :
s = Jarak antara sensor dengan objek (m)
t = Waktu tempuh gelombang ultrasonik dari trasmitter ke receiver (s)
membantu dalam membuat prototype produk IoT atau bisa dengan memakai
sketch dengan arduino IDE. Pengembangan kit ini didasarkan pada modul
ESP8266, yang mengintegrasikan GPIO, PWM (Pulse Width Modulation), IIC,
1-Wire dan ADC (Analog to Digital Converter) semua dalam satu board. GPIO
NodeMCU ESP8266 seperti Gambar 3.5.
NodeMCU berukuran panjang 4.83 cm, lebar 2.54 cm, dan berat 7 gram.
Board ini sudah dilengkapi dengan fitur WiFi dan Firmwarenya yang bersifat
opensource. Bentuk fisik NodeMCU 8266 dapat dilihat pada gambar 3.4.
12. SK yang merupakan SCLK dari master ke slave yang berfungsi sebagai
clock.
13. Pin Vin sebagai masukan tegangan.
14. Built in 32-bit MCU.
Database
20
21
4.5 Server
Untuk mengatur dan menghubungkan data dengan database dibutuhkan
server. Kami menggunakan server research.student.pnm.ac.id. server ini
berfungsi sebagai jembatan untuk menghubungkan antara data dari prototype
dengan database. Server yang digunakan adalah compromode. Dimana server
ini diperoleh dari Politeknik Negeri Madiun.
Pada server ini terdapat beberapa file .php yang telah dibuat menggunakan
software notepad++, diantaranya adalah koneksi.php,
database.php,
dataline.php, indexpenguapan.php, Json.php, hapus.php, hapusdata.php,
printpenguapan.php.
24
4.5.1 Koneksi.php
Koneksi.php digunakan untuk melihat data, mengambil data, dan
untuk dapat mengakses server. Dimana kami menuliskan username dan
password yang telah diterima pada koneksi.php ini. <?php berfungsi
untuk menginisialisasikan jika file yang kami buat ini merupakan file
php. Tampilannya dapat dilihat pada gambar dibawah ini.
4.5.2 Database.php
Database.php ini berfungsi untuk menghubungkan file php ke
database online.
4.5.3 Dataline.php
Dataline.php ini berfungsi untuk mengambil data dari database
online untuk ditampilkan dalam Json.php sebagai grafik.
25
4.5.6 Json.php
Json.php disini berfungsi untuk menampilkan data dalam bentuk
grafik garis dengan menggunakan bootstrap. Banyak data garis yang
ditampilkan sesuai dengan banyak data yang diambil dari Dataline.php.
27
4.5.7 Hapus.php
Hapus.php berfungsi untuk menghapus data yang telah dipilih
sebelumnya. Pada hapus.php ini terdapat fungsi dimana hanya data
yang telah dipilih yang bisa dihapus.
4.5.8 Printpenguapan.php
Printpenguapan.php berfungsi untuk mencetak data yang telah
masuk. Didalam printpenguapan.php terdapat fungsi-fungsi untuk
mengatur tabel serta tata letaknya untuk memudahkan pengguna dalam
28
penguapan, grafik, dan logout serta label yang berfungsi sebagai space.
Button suhu, penguapan, dan grafik berfungsi untuk menampilkan hasil
monitoring dari perangkat hardware yang telah dibuat. Sedangkan button
logout berfungsi untuk keluar dari menu. Kemudian terdapat juga
WebViewer1 yang berfungsi sebagai penampil data dari database. Lalu
Notifier1 yang berfungsi untuk menampilkan notifikasi jika pengguna
ingin keluar dari screen2. Terdapat 2 pilihan ya atau tidak. Jika ya maka
pengguna akan keluar dari screen2, namun jika tidak maka pengguna
akan tetap pada screen2.
Blocks fungsi logika dari screen2 dapat dilihat pada gambar 4.21.
4.8 Pengujian
4.8.1 Cara Pengambilan Data
Pengambilan data pada alat ini diambil oleh sensor ultrasonik HC-
SR04. Pada HC-SR04 terdapat pin Trigger dan Echo. Prinsip kerja dasar
sesor ini ketika pin trigger diberi pulse maka transmiter akan mulai
memancarkan gelombang ultrasonik, pada saat yang sama sensor akan
mulai menghitung waktu pengukuran. Setelah echo menerima transimisi
pantulan yang dihasilkan oleh suatu objek maka pengukuran waktu akan
dihentikan. Dalam alat ini kami menggunakan batas atas air setinggi 310
mm. Maka untuk memperoleh ketinggian air, menggunakan persamaan
2.
h air = 310 – jarak sensor dengan air (2)
34
Maka didapatkan data serta tingkat kesalahan (error) seperti pada Tabel
4.5.
Tabel 4.5 Tingkat Kesalahan (Error)
No. Hari/Tanggal Pengujian Manual Pengujian Hardware % error
Jumat,
1 7.5 7.94 5.8
23-08-2019
Minggu,
2 5.3 2.75 48
25-08-2019
39
Senin,
3 4.7 5.15 9.57
26-08-2019
Selasa,
4 4.8 6.53 36
27-08-2019
Rata-rata Error 24.8
BAB V
PENUTUP
5.1 Kesimpulan
Dalam penelitian ini, telah dibuat SISTEM MONITORING EVAPORASI
PADA PANCI PENGUAPAN BERBASIS ANDROID dengan tujuan
mempermudah pengguna dalam memonitor proses penguapan sehingga lebih
efisien waktu. Berdasarkan hasil perancangan dan pengujian alat ini, maka
dapat disimpulkan bahwa:
1. SISTEM MONITORING EVAPORASI PADA PANCI PENGUAPAN
BERBASIS ANDROID dapat berjalan dengan baik sesuai dengan tujuan
perancangan dengan tingkat kesalahan error rata-rata 24.8%.
2. Aplikasi android yang telah dibuat dapat digunakan dengan baik dan
menampilkan data sesuai dengan pengukuran sensor.
5.2 Saran
Beberapa saran yang penulis tuliskan merupakan saran dari tugas penulis.
Penulis menyadari bahwa tugas ini masih jauh dari kata sempurna. Untuk itu
penulis memberikan saran-saran untuk proses pengembangan lebih lanjut agar
alat ini bisa bermanfaat dan tepat guna, sebagai berikut:
1. Menggunakan komponen yang lebih tahan lama.
2. Memperhitungkan tingkat errornya, karena setiap nilai yang tercatat sangat
berpengaruh dengan lingkungan yang lebih luas.
3. Merperhitungkan jika terjadi hujan, karena curah hujan juga mempengaruhi
hasil yang tercatat.
4. Menambahkan eksternal power, seperti panel surya.
5. Menggunakan server yang lebih responsif agar meminimalisir server tidak
merespon selama pengambilan data.
40
41
DAFTAR PUSTAKA
ESP32/ESP8266 Insert Data into MySQL Database using PHP and Arduino IDE.
(2019, Juni 7). Dipetik Juli 26, 2019, dari Random Nerd Tutorials:
https://randomnerdtutorials.com/esp32-esp8266-mysql-database-php/
Faudin, A. (2017, Desember 3). Tutorial Arduino mengakses module RTC DS3231.
Dipetik Agustus 2, 2019, dari nyebarilmu.com: https://www.nyebarilmu.com/
tutorial-arduino-mengakses-module-rtc-ds3231/
#include <arduino.h>
#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <ESP8266HTTPClient.h>
#include <OneWire.h>
#include <RTClib.h>
#include <Wire.h>
RTC_DS3231 rtc;
char t[32];
#define USE_SERIAL Serial
ESP8266WiFiMulti WiFiMulti;
HTTPClient http;
int DS18S20_Pin = 4;
OneWire ds(DS18S20_Pin);
String payload;
#define triggerPin D3
#define echoPin D4
float bak = 310;
float jarak1,jarak2,suhu,suhu1,jarak3;
void setup() {
USE_SERIAL.begin(115200);
USE_SERIAL.setDebugOutput(false);
for(uint8_t t=4;t>0;t--){
USE_SERIAL.printf("[SETUP] tunggu %d....\n",t);
USE_SERIAL.flush();
delay(1000);
}
WiFi.mode(WIFI_STA);
WiFiMulti.addAP("STAMAR LT. 2","mrtm2019");
if(WiFiMulti.run() == WL_CONNECTED) {
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
}
Serial.begin(115200);
pinMode(triggerPin, OUTPUT);
pinMode(echoPin, INPUT);
Wire.begin(5, 14);
rtc.begin();
rtc.adjust(DateTime(2019, 8, 21, 10, 46, 00));
}
void loop() {
while (WiFiMulti.run() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
DateTime now = rtc.now();
Serial.print("Jam : ");
Serial.print(now.hour());
Serial.print(":");
Serial.print(now.minute());
Serial.print(":");
Serial.print(now.second());
Serial.println();
if((now.hour()==6 && now.minute()==55 &&
now.second()==00)) {
jarak1=ukur();
jarak1 = bak - jarak1;
Serial.println("jarak1= ");
Serial.println(jarak1);
suhu=getTemp();
Serial.println("suhu= ");
Serial.println(suhu);
jarak3=ukur();
jarak3 = bak - jarak3;
Serial.println("jarak3= ");
Serial.println(jarak3);
if((WiFiMulti.run()==WL_CONNECTED)) {
USE_SERIAL.print("[HTTP]MEmulai...\n");
http.begin("http://research.student.pnm.ac.id/compromod
e/pkl/simpandata1.php?jarak1="+(String)jarak1+"&jarak2=
"+(String)jarak3+"&suhu="+(String)suhu);
USE_SERIAL.print("[HTTP]Melakukan Get ke server...\n");
int httpCode=http.GET();
if(httpCode>0){
USE_SERIAL.printf("[HTTP] kode response GET:
%d\n",httpCode);
if(httpCode == HTTP_CODE_OK) {
payload=http.getString();
USE_SERIAL.println(payload);
}
} else {
USE_SERIAL.printf("[HTTP]GET GAGAL, error:
%s\n",http.errorToString(httpCode).c_str());
}
http.end();
}
}
else if((now.hour()==6 && now.minute()==50 &&
now.second()==00)) {
jarak1=ukur();
jarak1 = bak - jarak1;
Serial.println("jarak1= ");
Serial.println(jarak1);
suhu=getTemp();
Serial.println("suhu= ");
Serial.println(suhu);
jarak3=ukur();
jarak3 = bak - jarak3;
Serial.println("jarak3= ");
Serial.println(jarak3);
if((WiFiMulti.run()==WL_CONNECTED)) {
USE_SERIAL.print("[HTTP]MEmulai...\n");
http.begin("http://research.student.pnm.ac.id/compromod
e/pkl/simpandata1.php?jarak1="+(String)jarak1+"&jarak2=
"+(String)jarak3+"&suhu="+(String)suhu);
USE_SERIAL.print("[HTTP]Melakukan Get ke server...\n");
int httpCode=http.GET();
if(httpCode>0){
USE_SERIAL.printf("[HTTP] kode response GET:
%d\n",httpCode);
if(httpCode == HTTP_CODE_OK) {
payload=http.getString();
USE_SERIAL.println(payload);
}
} else {
float suhu1=getTemp();
Serial.println("suhu= ");
Serial.println(suhu1);
if((WiFiMulti.run()==WL_CONNECTED)) {
USE_SERIAL.print("[HTTP]MEmulai...\n");
http.begin("http://research.student.pnm.ac.id/compromo
de/pkl/simpandata1.php?jarak1="+(String)jarak1+"&jarak
2="+(String)jarak2+"&suhu="+(String)suhu1);
USE_SERIAL.print("[HTTP]Melakukan Get ke
server...\n");
int httpCode=http.GET();
if(httpCode>0){
USE_SERIAL.printf("[HTTP] kode response GET:
%d\n",httpCode);
if(httpCode == HTTP_CODE_OK) {
payload=http.getString();
USE_SERIAL.println(payload);
}
} else {
USE_SERIAL.printf("[HTTP]GET GAGAL, error:
%s\n",http.errorToString(httpCode).c_str());
}
http.end();
}
}
delay(1000);
}
float ukur()
{
long duration;
float jarak;
digitalWrite(triggerPin, LOW);
delayMicroseconds(2);
digitalWrite(triggerPin, HIGH);
delayMicroseconds(10);
digitalWrite(triggerPin, LOW);
duration = pulseIn(echoPin, HIGH);
jarak = (duration/2) / 2.91;
return jarak;
}
float getTemp(){
byte data[12];
byte addr[8];
if ( !ds.search(addr)) {
ds.reset_search();
return -1000;
}
if ( OneWire::crc8( addr, 7) != addr[7]) {
Serial.println("CRC is not valid!");
return -1000;
}
if ( addr[0] != 0x10 && addr[0] != 0x28) {
Serial.print("Device is not recognized");
return -1000;
}
ds.reset();
ds.select(addr);
ds.write(0x44,1);
byte present = ds.reset();
ds.select(addr);
ds.write(0xBE);
for (int i = 0; i < 9; i++) {
data[i] = ds.read();
}
ds.reset_search();
byte MSB = data[1];
byte LSB = data[0];
return TemperatureSum;}
LAMPIRAN 2 LISTING PROGRAM WEBSITE
Json.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta name="author" content="Yoga Bayu Anggana
Pratama">
<title>Bootstrap Graph Data Control </title>
<!-- Bagian css -->
<link rel="stylesheet"
href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<script src="assets/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("dataline.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'mygraph',
type: 'line'},
title: {
text: 'Penguapan, suhu'},
subtitle: {
text: '(Percobaan)'},
xAxis: {
categories: ['1', '2', '3',
'4', '5', '6', '7']},
yAxis: {
title: {
text: 'nilai'},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+
this.series.name
+'</b><br/>'+
this.x +': '+ this.y;
}},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 120,
borderWidth: 0
},
series: json
});
});
});
});
</script>
<script src="assets/js/highcharts.js"></script>
<script src="assets/js/exporting.js"></script>
<script>function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod)
;}
window.onload = timedRefresh(60000);
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-
bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Pusat Data Dan
Informasi</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="#">Home</a></li>
<li class="clr2"><a href="indexsuhu.php">Data
Table Suhu</a></li>
<li class="clr3"><a href="indexpenguapan.php">Data
Table Penguapan</a></li>
</ul>
</div>
</div>
</nav>
</br></br></br></br>
<!--- Bagian Judul-->
<div class="container" style="margin-top:20px">
<div class="col-md-10">
<div class="panel panel-primary">
<div class="panel-heading">DATA
PENGAMATAN
</div>
<div class="panel-body">
<div id ="mygraph"></div>
</div>
</div>
</div>
</div>
<script src="assets/js/highcharts.js"></script>
<script src="assets/js/jquery-1.10.1.min.js"></script>
<div class="navbar navbar-default navbar-fixed-bottom
footer-bottom">
<div class="container text-center">
<p class="text-center">Copyright © 2019,
DTC. Developed by TEAM PKL Baldo halilintar</p>
</div>
</div>
</body>
</html>
Indexpenguapan.php
<!DOCTYPE html>
<html>
<head>
<title>MONITORING</title>
<style>
h1,h2,p,a{
font-family: sans-serif;
font-weight: normal;
}
.jam-digital {
overflow: hidden;
width: 340px;
margin-right: 170px;
margin-left: auto;
margin-top: 8%;
border: 5px solid #0c18f7;
}
.kotak{
float: left;
width: 110px;
height: 100px;
background-color: #000000;
border: 1px solid #0c18f7
}
.jam-digital p {
color: #fff;
font-size: 36px;
text-align: center;
margin-top: 24px;
}
.Tanggal {
font-family : tahoma;
font-weight : bold;
font-size : 17px;
color : #0c18f7;
position : relative;
text-align: right;
right : 196px;
top : 10px;
}
table {
border-collapse: collapse;
width: 45%;
color: #1f5380;
font-family: monospace;
font-size: 20px;
text-align: left;
margin-left: 30px;
margin-right: 35px;
}
th {
background-color: #1f5380;
color: white;
}
tr:nth-child(even) {background-color: #f2f2f2}
.header {
background-color: black;
height: 110px;
color: white;
}
.tombol{
background:#2C97DF;
color:white;
border-top:0;
border-left:0;
border-right:0;
border-bottom:5px solid #2A80B9;
padding:10px 20px;
text-decoration:none;
font-family:sans-serif;
font-size:11pt;
}
.tombol:hover {
color: red;
}
@import
url(http://fonts.googleapis.com/css?family=Roboto);
.button-container {
text-align: center;
}
.button {
position: relative;
right : -343px;
background: currentColor;
border: 1px solid currentColor;
font-size: 1.1rem;
color: #1600d8;
margin: 0.5rem 0;
padding: 0.25rem 1.5rem;
cursor: pointer;
-webkit-transition: background-color 0.28s ease,
color 0.28s ease, box-shadow 0.28s ease;
transition: background-color 0.28s ease, color
0.28s ease, box-shadow 0.28s ease;
overflow: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px
1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0,
0, 0, 0.12);
}
.button span {
color: #fff;
position: relative;
z-index: 1;
}
.button::before {
content: '';
position: absolute;
background: #071017;
border: 50vh solid #1d4567;
width: 30vh;
height: 30vh;
border-radius: 50%;
display: block;
top: 10%;
left: 10%;
z-index: 0;
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
.button:hover {
color: #D81900;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0
1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px
rgba(0, 0, 0, 0.2);
}
.button:active::before, .button:focus::before {
-webkit-transition: opacity 0.28s ease 0.364s, -
webkit-transform 1.12s ease;
transition: opacity 0.28s ease 0.364s, -webkit-
transform 1.12s ease;
transition: transform 1.12s ease, opacity 0.28s
ease 0.364s;
transition: transform 1.12s ease, opacity 0.28s
ease 0.364s, -webkit-transform 1.12s ease;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
.button:focus {
outline: none;
}
.print {
font-family : tahoma;
font-weight : bold;
font-size : 17px;
color : crimson;
position : relative;
text-align: center;
top : 10px;
left: -350px;
}
.blink {
animation: blink-animation 1s steps(5, start)
infinite;
-webkit-animation: blink-animation 1s steps(5,
start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
.blink p{
font-family : tahoma;
font-size : 17px;
color : crimson;
position : relative;
left: -25px;
text-align: center;
}
.up {
font-weight= bold;
}
img.gambar{
width:40px;
weight:30px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom:4px;
}
.tombol1{
background:#2C97DF;
color:white;
border-top:0;
border-left:0;
border-right:0;
border-bottom:5px solid #2A80B9;
padding:10px 20px;
text-decoration:none;
font-family:sans-serif;
font-size:11pt;
}
.tombol1:hover {
color: red;
}
@import
url(http://fonts.googleapis.com/css?family=Roboto);
.button1-container {
text-align: center;
}
.button1 {
position: relative;
background: currentColor;
border: 1px solid currentColor;
font-size: 1.1rem;
color: #1600d8;
margin: 0.5rem 0;
padding: 0.25rem 1.5rem;
cursor: pointer;
-webkit-transition: background-color 0.28s ease,
color 0.28s ease, box-shadow 0.28s ease;
transition: background-color 0.28s ease, color
0.28s ease, box-shadow 0.28s ease;
overflow: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px
1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0,
0, 0, 0.12);
}
.button1 span {
color: #fff;
position: relative;
z-index: 1;
}
.button1::before {
content: '';
position: absolute;
background: #071017;
border: 50vh solid #1d4567;
width: 30vh;
height: 30vh;
border-radius: 50%;
display: block;
top: 10%;
left: 10%;
z-index: 0;
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
.button1:hover {
color: #D81900;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0
1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px
rgba(0, 0, 0, 0.2);
}
.button1:active::before, .button:focus::before {
-webkit-transition: opacity 0.28s ease 0.364s, -
webkit-transform 1.12s ease;
transition: opacity 0.28s ease 0.364s, -webkit-
transform 1.12s ease;
transition: transform 1.12s ease, opacity 0.28s
ease 0.364s;
transition: transform 1.12s ease, opacity 0.28s
ease 0.364s, -webkit-transform 1.12s ease;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
.button1:focus {
outline: none;
}
</style>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css"
href="animation5.css">
</head>
<div class="container">
<span class="text1">Data Alat</span>
<span class="text2">PENGUAPAN</span>
</div>
</div>
<br>
<form action="hapus.php" method="post">
<table border="1" align="left" width="500px">
<tr>
<th><center>id</center></th>
<th><center>Waktu</center></th>
<th><center>Ketinggian <br> Pertama
(mm)</center></th>
<th><center>Ketinggian <br> Kedua
(mm)</center></th>
<th><center>Pilih <br><input type="submit"
name="hapus" value="Hapus" class="tombol">
</center></th>
</tr>
<?php
include 'koneksi.php';
$no = 1;
$data = mysqli_query($koneksi,"select * from pkl");
while($d = mysqli_fetch_array($data)){
?>
<tr>
<td><center><?php echo $id++;
?></center></td>
<td><center><?php echo $d['waktu']; ?></center></td>
<td><center><?php echo $d['jarak1']; ?></center></td>
<td><center><?php echo $d['jarak2']; ?></center></td>
<td><input type="checkbox" name="pilih[]" value="<?php
echo $d['id']; ?>"></td>
</tr>
<?php
}
?>
</table>
</form>
<table align="right" width="450px">
<tr>
<td bgcolor="#C0C0C0">Pengukuran terakhir pertama (mm)
</td>
<td bgcolor="#C0C0C0"> = </td>
<td bgcolor="#C0C0C0"><?php
include 'koneksi.php';
$data = mysqli_query($koneksi,"SELECT * FROM pkl ORDER
BY id DESC LIMIT 1 ");
while($d = mysqli_fetch_array($data)){
?>
Printpenguapan.php
<!DOCTYPE html>
<html>
<head>
<title>MONITORING</title>
<style>
table {
border-collapse: collapse;
width: 100%;
color: #1f5380;
font-family: monospace;
font-size: 20px;
text-align: left;
}
th {
background-color: #1f5380;
color: white;
}
tr:nth-child(even) {background-color: #f2f2f2}
.header {
background-color: #7FFFD4;
color: white;
}
.tombol{
background:#2C97DF;
color:white;
border-top:0;
border-left:0;
border-right:0;
border-bottom:5px solid #2A80B9;
padding:10px 20px;
text-decoration:none;
font-family:sans-serif;
font-size:11pt;
}
.tombol:hover {
color: red;
}
@import
url(http://fonts.googleapis.com/css?family=Roboto);
.button-container {
text-align: center;
}
.button {
position: relative;
background: currentColor;
border: 1px solid currentColor;
font-size: 1.1rem;
color: #D81900;
margin: 1.5rem 0;
padding: 0.25rem 1.5rem;
cursor: pointer;
-webkit-transition: background-color 0.28s ease,
color 0.28s ease, box-shadow 0.28s ease;
transition: background-color 0.28s ease, color
0.28s ease, box-shadow 0.28s ease;
overflow: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px
1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0,
0, 0, 0.12);
}
.button span {
color: #fff;
position: relative;
z-index: 1;
}
.button::before {
content: '';
position: absolute;
background: #071017;
border: 50vh solid #1d4567;
width: 30vh;
height: 30vh;
border-radius: 50%;
display: block;
top: 10%;
left: 10%;
z-index: 0;
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
.button:hover {
color: #D81900;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0
1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px
rgba(0, 0, 0, 0.2);
}
.button:active::before,
.button:focus::before {
-webkit-transition: opacity 0.28s ease 0.364s, -
webkit-transform 1.12s ease;
transition: opacity 0.28s ease 0.364s, -webkit-
transform 1.12s ease;
transition: transform 1.12s ease, opacity 0.28s
ease 0.364s;
transition: transform 1.12s ease, opacity 0.28s
ease 0.364s, -webkit-transform 1.12s ease;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
.button:focus {
outline: none;
}
.judul {
color:black;
}
.garis {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 6px;
}
</style>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<meta http-equiv="refresh" content="10"/>
<body>
<div>
<script>
function goBack() {
window.history.back();
}
</script>