Anda di halaman 1dari 111

LAPORAN PRAKTIK KERJA LAPANGAN ( PKL )

SISTEM MONITORING EVAPORASI PADA PANCI PENGUAPAN


BERBASIS ANDROID
BMKG STASIUN METEOROLOGI MARITIM PERAK SURABAYA

Oleh:

1. NIA SAFITRI NPM: 170400380


2. YOGA BAYU ANGGANA PRATAMA NPM: 170400390

PROGRAM STUDI TEKNIK KOMPUTER KONTROL


JURUSAN TEKNIK
POLITEKNIK NEGERI MADIUN
2019
LAPORAN PRAKTIK KERJA LAPANGAN ( PKL )
SISTEM MONITORING EVAPORASI PADA PANCI PENGUAPAN
BERBASIS ANDROID
BMKG STASIUN METEOROLOGI MARITIM PERAK SURABAYA

Oleh:

1. NIA SAFITRI NPM: 170400380


2. YOGA BAYU ANGGANA PRATAMA NPM: 170400390

PROGRAM STUDI TEKNIK KOMPUTER KONTROL


JURUSAN TEKNIK
POLITEKNIK NEGERI MADIUN
2019

i
LEMBAR PENGESAHAN LAPORAN PKL
SISTEM MOITORING EVAPORASI PADA PANCI PENGUAPAN
BERBASIS ANDROID
BMKG STASIUN METEOROLOGI MARITIM PERAK SURABAYA

OLEH :

Nia Safitri Yoga Bayu Anggana Pratama


NIM 170400380 NIM 170400390

MENYETUJUI
DOSEN PEMBIMBING

Drs. Dahris Shahab, M.Pd


NIDN. 0717016902

MENGETAHUI KOORDINATOR PROGRAM STUDI


KETUA JURUSAN TEKNIK KOMPUTER KONTROL

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

Penelitian merancang dan membuat suatu sistem pengukuran penguapan


pada panci penguapan dengan memanfaatkan sensor ultrasonik yang dapat
ditampilkan melalui web. Program otomasi menjadikan peralatan operasional di
BMKG yang sebelumnya merupakan versi analog beralih menjadi versi digital.
Evaporimeter di Taman Alat BMKG rata-rata masih merupakan versi analog dan
perlu dilakukan peningkatan kualitas serta pengoperasian secara otomatis.
Perancangan sistem terbagi menjadi tiga bagian yaitu perancangan hardware,
software, dan tampilan antar muka. Perancangan hardware dimulai dengan
merancang desain agar sensor dapat mengukur jumlah penguapan air yang terjadi
pada panci penguapan. Perancangan sistem instrumentasi tahap selanjutnya dengan
membuat desain untuk mengintegrasikan antara sensor, mikrokontroler, database,
dan NodeMCU ESP8266. Perancangan algoritma pemrograman dilakukan dengan
software arduino IDE untuk mengolah keluaran sensor menjadi milimeter. Desain
antar muka untuk menampilkan nilai penguapan dan menampilkan pada web
melalui internet. Sistem menggunakan box berbahan plastik untuk melindungi
komponen elektronik sistem. Pengujian sensor menggunakan alat panci penguapan
analog untuk mengkomparasi keluaran sensor ultrasonik dalam satuan milimeter.
Sistem yang telah dibuat dapat bekerja dengan baik dan dapat dikembangkan dalam
penelitian selanjutnya.

Kata Kunci : Penguapan, Sensor Ultrasonik, Evaporimeter, NodeMCU ESP8266

iv
KATA PENGANTAR

Alhamdulillahhirrabil’alamin, segala puji dan syukur penulis panjatkan


kehadirat Tuhan Yang Maha Esa yang telah memberikan nikmat serta hidayah-Nya
terutama nikmat kesempatan dan kesehatan sehingga penulis dapat menyelesaikan
Laporan Praktek Kerja Lapangan (PKL) yang berjudul “SISTEM MONITORING
EVAPORASI PADA PANCI PENGUAPAN BERBASIS ANDROID”. Program
Praktik Kerja Lapangan yang diselenggarakan Politeknik Negeri Madiun sejak 01
Juli hingga 31 Agustus 2019.
Adapun penyusunan laporan ini merupakan salah satu syarat menyelesaikan
Tugas Akhir (TA)/Skripsi. Durasi pelaksanaan Praktik Kerja Lapangan selama (2)
dua bulan. Dalam penyusunan laporan hasil Praktik Kerja Lapangan ini penulis
banyak mendapatkan bantuan dari berbagai pihak. Oleh karena itu, penulis
mengucapkan terimaa kasih sebesar-besarnya kepada:
1. Allah SWT. yang memberikan rahmat dan kasih sayang serta memberikan
nikmat bagi umat-Nya.
2. Bapak Drs. Dahris Shahab, M.Pd selaku Dosen Pembimbing Penulis Laporan
Praktek Kerja Lapangan.
3. Bapak Ahmad Bahtiar, S.Kom selaku Pembimbing Lapangan, Perantara dan
Pembagi Divisi.
4. Bapak Sutarno, SE selaku Kepala Sesi Observasi dan Informasi di BMKG
Stasiun Meteorologi Maritim Perak Surabaya.
5. Bapak Ari Widjajanto, SP, MT selaku Kepala Kelompok Forcaster serta
seluruh pegawai BMKG Stasiun Meteorologi Maritim Perak Surabaya yang
telah membantu selama kegiatan PKL berlangsung.
6. Orang tua dan keluarga yang selalu mendukung, memberikan semangat, dan
kasih sayang yang telah dicurahkan kepada penulis.
7. Teman-teman seperjuangan yang membantu penulis dalam melaksanakan
Kerja Praktek.
8. Seluruh pihak yang terlibat baik secara langsung dan tidak langsung yang telah
membantu penulis menyelesaikan laporan praktek kerja lapnagan ini.

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.

Surabaya, 29 Agustus 2019

Penulis

vi
DAFTAR ISI

HALAMAN
JUDUL .............................................................................
................. i

HALAMAN PENGESAHAN POLITEKNIK NEGERI MADIUN ................. ii

LEMBAR PENGESAHAN PERUSAHAAN .....................................................


iii

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

3.1 Panci Penguapan (Pan


Evaporasi) ............................................................. 10
3.2 Sensor Ultrasonik HC-
SR04 ...................................................................... 11
3.3 NodeMCU
ESP8266 ...........................................................................
....... 13
3.4 RTC
DS3231 ............................................................................
.................. 16
3.5 Arduino
IDE ...............................................................................
................ 17
3.6 Database
MySQL .............................................................................
........... 17
3.7 MIT App
Inventor ..........................................................................
............. 18
BAB IV-ANALISA DAN
PEMBAHASAN ....................................................... 20

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

Gambar 2.1. Logo BMKG


Maritim ...........................................................................
. 7
Gambar 2.2. Struktur Organisasi BMKG Stasiun Meteorologi Maritim Perak 2 ...... 7
Gambar 2.3. Denah Lokasi Kantor BMKG Perak 2
Surabaya .................................... 9
Gambar 3.1. Alat-alat
Evaporasi .........................................................................
...... 11
Gambar 3.2. Konfigurasi pindan tampilan sensor ultrasonik HC-
SR04 ................... 12
Gambar 3.3. Prinsip Kerja HC-
SR04 ........................................................................ 13
Gambar 3.4. Bentuk fisik NodeMCU esp8266
v3 .................................................... 14
Gambar 3.5. GPIO NodeMCU esp8266
v3 ............................................................... 15
Gambar 3.6. Bentuk fisik RTC
DS3231 .................................................................... 16
Gambar 3.7. Interface Arduino
IDE .......................................................................... 17
Gambar 3.8. Interface
PhpMyadmin ........................................................................
. 18
Gambar 3.9. Interface MIT APP
Inventor ................................................................. 18
Gambar 4.1. Blok Diagram
Kerja..............................................................................
19
Gambar 4.2. Gambar
Rangkaian .........................................................................
...... 20
Gambar 4.3. Rangkaian
PCB................................................................................
..... 20
Gambar 4.4. Tampilan listing program arduino
IDE ................................................ 21
Gambar 4.5. Database
MySQL .............................................................................
.... 22
Gambar 4.6. Server
research.student.pnm.ac.id ........................................................
22
Gambar 4.7. Listing program
koneksi.php ................................................................ 23
Gambar 4.8. Listing program
database.php............................................................... 23
Gambar 4.9. Listing program
Dataline.php ............................................................... 23
Gambar 4.10. Tampilan listing program
Simpandata1.php ...................................... 24
Gambar 4.11. Tampilan listing program
indekpenguapan.php ................................. 25
Gambar 4.12. Tampilan listing program
Json.php .................................................... 25
Gambar 4.13. Program
Hapus.php. ........................................................................
... 26
Gambar 4.14. Tampilan listing program
printpenguapan.php .................................. 27
Gambar 4.15. Web Tampilan
Data ............................................................................
27
Gambar 4.16. Tampilan Print
data ............................................................................
28
Gambar 4.17. Tampilan ikon aplikasi
ATE............................................................... 28

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

Tabel 3.1. Spesifikasi Sensor HC-


SR04 .................................................................... 11
Tabel 3.2. Spesifikasi Pin pada sensor HC-
SR04 ..................................................... 12
Tabel 4.1. Data Pengujian Hari Pertama (23 Agustus
2019) ..................................... 33
Tabel 4.2. Data Pengujian Hari Ketiga (25 Agustus
2019) ........................................ 34
Tabel 4.3. Data Pengujian Hari Keempat (26 Agustus
2019) .................................... 34
Tabel 4.4. Data Pengujian Hari Kelima (27 Agustus
2019) ....................................... 35
Tabel 4.5. Tingkat Kesalahan
(Error) ........................................................................ 38

xii
DAFTAR LAMPIRAN

Lampiran 1 Listing Program Arduino IDE


Lampiran 2 Listing Program Website
Lampiran 3 Monitoring Bimbingan
Lampiran 4 Surat Pengantar
Lampiran 5 Surat Balasan PKL
Lampiran 6 Data PKL
Lampiran 7 Foto Kegiatan PKL
Lampiran 8 Presensi PKL
Lampiran 9 Jurnal Kegiatan PKL
Lampiran 10 Penilaian Pembimbing Perusahaan
Lampiran 11 Surat Keterangan Selesai PKL

xiii
BAB 1
PENDAHULUAN

1.1 Latar Belakang


Era globalisasi menuntut kesiapan Sumber Daya Manusia (SDM) untuk
berperan dan berkompetensi dalam dunia kerja. Mahasiswa sebagai salah satu
anggota masyarakat akademis diharapkan mampu menjadi lulusan yang
terampil, profesional dan mempunyai etos kerja yang sesuai dengan tuntutan
lapangan kerja. Politeknik Negeri Madiun sebagai salah satu Politeknik di
Indonesia yang selalu menyesuaikan kurikulum perkuliahan dengan
perkembangan dunia kerja. Oleh karena itu, diharapkan mampu mencetak
lulusan yang berkualitas dan mengimplementasikan ilmu yang diperoleh saat
di bangku perkuliahan sebagai pondasi dalam menghadapi dan menyelesaikan
berbagai permasalahan didunia kerja.
Untuk menghadapi permasalahan didunia kerja kelak, mahasiswa Teknik
Komputer Kontrol dituntut untuk mengikuti dan beradaptasi dengan
lingkungan kerja. Dalam usaha menyesuaikan dan mengikuti perkembangan
industri, pihak kampus mengadakan kegiatan Praktik Kerja Lapangan (PKL)
yang dinilai sebagai sarana efektif untuk mahasiswa. Praktik Kerja Lapangan
(PKL) juga bertujuan agar mahasiswa mampu memperoleh, mengasah, dan
mengaplikasikan baik wawasan baru dari Industri maupun ilmu yang telah
diperoleh dari bangku perkuliahan sebagai salah satu syarat mendapat gelar
Diploma III.
Sehubungan dengan kegiatan Praktek Kerja Lapangan, kami memilih
perusahaan/instansi BMKG Stasiun Meteorologi Maritim Perak Surabaya
sebagai badan pelaksana tugas pemerintah dibidang meteorologi maritim untuk
dijadikan tempat PKL selama dua bulan. Dan hasil dari semua yang telah
dilaksakan dalam PKL tersebut, mahasiswa mampu mempresentasikan kepada
karyawan dan peserta PKL lainnya. Sebagai instansi pemerintahan, BMKG
Stasiun Meteorologi Maritim Perak Surabaya bertugas untuk memberikan
prakiraan cuaca maritim kepada masyarakat baik dalam

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.2 Perumusan Masalah


Berdasarkan latar belakang di atas, maka rumusan masalah yang didapat
sebagai berikut:
1. Bagaimana cara perangkat aplikasi android pada smartphone menampilkan
data pengukuran dari panci penguapan secara realtime?
2. Bagaimana cara perangkat aplikasi android pada smartphone menerima
data hasil deteksi sensor yang dikirim oleh perangkat prototype alat
pengukur dan masuk ke database?

1.3 Tujuan dan Manfaat


1.3.1 Tujuan
Berdasarkan rumusan masalah tersebut, maka dapat dijelaskan
bahwa prototype ini bertujuan untuk:
3

1. Membuat aplikasi android dan prototype alat pengukur jumlah uap


air yang bisa diterima oleh semua kalangan.
2. Menampilkan jumlah uap air pada database secara realtime.
3. Menghubungkan aplikasi android dengan prototype melalui
jaringan Wi-Fi.

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.4 Ruang Lingkup Pembahasan


Untuk menghindari meluasnya permasalahan dalam penyusunan laporan
dan penulisan laporan Praktik Kerja Lapangan (PKL), maka kami hanya dapat
membahas masalah tentang sistem monitoring pengukur penguapan pada panci
penguapan berbasis android.
1.5 Metodologi Penulisan
Dalam menyelesaikan laporan Praktik Kerja Lapangan ini, penulis
menggunakan beberapa metode penelitian antara lain:
4

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.

1.6 Sistematika Penulisan


BAB I : PENDAHULUAN
Memuat tentang latar belakang, perumusan masalah, tujuan dan
manfaat, ruang lingkup pembahasan, metodologi penulisan, dan
sistematika penulisan.
BAB II : GAMBARAN UMUM PERUSAHAAN
Pada bab ini memuat ulasan tentang gambaran umum perusahaan
dimana Praktek Kerja Lapangan dilaksanakan juga memuat
deskripsi perusahaan, visi dan misi, sejarah singkat, dan struktur
organisasi.
BAB III : LANDASAN TEORI
Bab ini berisi tentang teori, landasan, bagian-bagian alat, prinsip
kerja alat dan gambaran umum tentang alat yang telah ada atau
yang akan digunakan.
5

BAB IV : ANALISA DAN PEMBAHASAN


Bab ini berisi gambaran dari kegiatan kami selama PKL, analisa
sistem dan uraian dari sistem yang digunakan, kekurangan dan
kelebihan sistem yang digunakan, serta usulan perbaikan.
BAB V : PENUTUP
Dalam bab ini berisi tentang kesimpulan dan saran-saran dari
pokok bahasan yang telah diteliti dalam Praktik Kerja Lapangan.
BAB II
GAMBARAN UMUM PERUSAHAAN

2.1 Sejarah BMKG Stasiun Meteorologi Maritim Perak Surabaya


Badan Meteorologi Klimatologi dan Geofisika (BMKG) merupakan
Lembaga Pemerintah Non Departemen (LPND) dipimpin oleh seorang Kepala
Badan. BMKG mempunyai tugas untuk melaksanakan tugas pemerintahan
dibidang Meteorologi, Klimatologi, Kualitas Udara, dan Geofisika sesuai
dengan ketentuan perundang-undangan yang berlaku. Dalam melaksanakan
tugas sebagaimana dimaksud di atas, Badan Meteorologi Klimatolog dan
Geofisika memiliki Unit Pelaksana Teknis yang tersebar diseluruh Indonesia.
Stasiun Meteorologi Maritim Perak II Surabaya posisi 07o 12' 20" LS - 112o
44' 08" BT di Jl. Kalimas Baru No. 97B Surabaya merupakan Unit Pelaksana
Tehnis didaerah yang berada dibawah pengawasan Balai Besar Wilayah III dan
langsung bertanggung jawab terhadap Kepala BMKG Jakarta.
Stasiun Meteorologi Maritim Perak II Surabaya dibangun 1976 dengan
diterbitkan Surat Keputusan Menteri Perhubungan nomor KM.56/OT/Phb-
1978 tentang Susunan Organisasi dan Tata Kerja Balai Meteorologi dan
Geofisika dan menurut pasal 28 Stasiun Meteorologi Maritim Perak II
Surabaya termasuk Klas II dan mulai melaksanakan kegiatan operasional
dengan jumlah 4 orang pegawai dan seorang Pimpinan. Bapak Soehadiharto
adalah pimpinan Stasiun Meteorologi Maritim Perak II Surabaya yang pertama
kali. Kegiatan yang dilaksanakan adalah pengamatan cuaca di darat tiap jam
selama 12 jam yang dimulai jam 07.00 WIB (00.00 GMT) sampai jam
19.00WIB (12.00 GMT), koordinasi dengan perusahaan pelayaran yang
tergabung dengan INZA (Indonesian Shipp Owner Assotiation), memberi
informasi cuaca buruk untuk Pelayaran Rakyat, menerima berita SHIPP dari
kapal-kapal NIAGA via Radio Pantai milik Perhubungan Laut, mengirim berita
SHIPP dan berita sandi SYNOP ke Balai Wilayah III, melaksanakan kegiatan
administrasi perkantoran yang tugasnya saat itu dirangkap oleh

6
7

tenaga operasional. Pada tahun 1987 digantikan bapak Moyo Legowo.Tahun


1990 Kepala Stasiun Meteorologi Maritim Perak II Surabaya digantikan oleh
bapak Triadi Agustino Karpo dan jumlah pegawai 8 orang kemudian
bertambah menjadi 13 orang, kegiatan juga bertambah yakni forecast untuk
route pelayaran, pengamatan cuaca di laut Surabaya–Madura pulang pergi dan
Surabaya–Bawean yang dilaksanakan di atas kapal, penambahan peralatan
termasuk perangkat lunak. Kemudian tahun 1998 operasional ditingkatkan
menjadi 24 jam.

Gambar 2.1 Logo BMKG

2.2 Struktur Organisasi


Dalam Kepengurusan BMKG memiliki Kepala yang membawahi 5 (lima)
Deputi yaitu deputi bidang meteorologi, deputi bidang klimatologi, deputi
bidang geofisika, dan deputi bidang instrumentasi , kalibrasi, rekayasa, dan
jaringan komunikasi. Dalam BMKG Stasiun Meteorologi Maritim Perak 2,
Kepala Stasiun Meteorologi Kelas 2 adalah Taufiq Hermawan, S.T. M.T.

Gambar 2.2 Struktur Organisasi BMKG Stasiun Meteorologi Maritim Perak Surabaya
8

2.3 Visi dan Misi


BMKG memiliki visi yaitu “Mewujudkan BMKG yang handal, tanggap
dan mampu dalam rangka mendukung keselamatan masyarakat serta
keberhasilan pembangunan nasional, dan berperan aktif di tingkat
Internasional”.
Terminologi didalam visi tersebut dapat dijelaskan sebagai berikut :
a. Pelayanan informasi meteorologi, klimatologi, kualitas udara, dan geofisika
yang handal ialah pelayanan BMKG terhadap penyajian data, informasi
pelayanan jasa meteorologi, klimatologi, kualitas udara, dan geofisika yang
akurat, tepat sasaran, tepat guna, cepat, lengkap, dan
dapat
dipertanggungjawabkan.
b. Tanggap dan mampu dimaksudkan BMKG dapat menangkap dan
merumuskan kebutuhan stakeholder akan data, informasi, dan jasa
meteorologi, klimatologi, kualitas udara, dan geofisika serta mampu
memberikan pelayanan sesuai dengan kebutuhan pengguna jasa.
Sedangkan Misi BMKG adalah
a. Mengamati dan memahami fenomena meteorologi, klimatologi, kualitas
udara dan geofisika.
b. Menyediakan data, informasi dan jasa meteorologi, klimatologi, kualitas
udara dan geofisika yang handal dan terpercaya.
c. Mengkoordinasikan dan memfasilitasi kegiatan dibidang meteorologi,
klimatologi , kualitas udara dan geofisika.
d. Berpartisipasi aktif dalam kegiatan internasional dibidang meteorologi,
klimatologi , kualitas udara dan geofisika.
Secara lebih rinci, maksud dari pernyataan misi di atas adalah sebagai
berikut :
a. Mengamati dan memahami fenomena meteorologi, klimatologi, kualitas
udara, dan geofisika artinya BMKG melaksanakan operasional pengamatan
dan pengumpulan data secara teratur, lengkap dan akurat guna dipakai untuk
mengenali dan memahami karakteristik unsur-unsur
meteorologi,
9

klimatologi, kualitas udara, dan geofisika guna membuat prakiraan dan


informasi yang akurat.
b. Menyediakan data, informasi dan jasa meteorologi, klimatologi, kualitas
udara, dan geofisika kepada para pengguna sesuai dengan kebutuhan dan
keinginan mereka dengan tingkat akurasi tinggi dan tepat waktu.
c. Mengkoordinasi dan Memfasilitasi kegiatan sesuai dengan kewenangan
BMKG, maka BMKG wajib mengawasi pelaksanaan operasional, memberi
pedoman teknis, serta berwenang untuk mengkalibrasi peralatan
meteorologi, klimatologi, kualitas udara, dan geofisika sesuai dengan
peraturan yang berlaku.
d. Berpartisipasi aktif dalam kegiatan internasional artinya BMKG dalam
melaksanakan kegiatan secara operasional selalu mengacu pada ketentuan
internasional mengingat bahwa fenomena meteorologi, klimatologi,
kualitas udara, dan geofisika tidak terbatas dan tidak terkait pada batas
batas
wilayah suatu negara manapun.

2.4 Lokasi BMKG Stasiun Meteorologi Maritim Perak Surabaya


Lokasi dari BMKG perak 2 berada di Jl. Kalimas Baru No.97B, Surabaya
– Jawa Timur Kode POS: 60165. Berikut adalah gambar denah lokasi BMKG
Perak 2 Surabaya yang terlihat pada Gambar 2.3.

Gambar 2.3 Denah Lokasi Kantor BMKG Perak 2 Surabaya


BAB III
LANDASAN TEORI

Sistem Monitoring Evaporasi pada Panci Penguapan Berbasis Android


merupakan sebuah alat untuk memantau penguapan yang dihasilkan panci
penguapan per 3 jam sekali. Dalam perancangan sistem ini, diperlukan beberapa
referensi untuk menunjang keberhasilan pembuatan. Diantaranya adalah
pengetahuan tentang cara memantau penguapan secara manual, laporan yang kami
ambil dari internet, penelitian terdahulu, dan materi dari perkuliahan. Berikut ini
adalah beberapa penjelasan mengenai komponen dan software yang akan kami
gunakan dalam perancangan tugas ini.
3.1 Panci Penguapan (Pan Evaporasi)
Pengamatan penguapan udara menggunakan alat penguapan yang terdiri
dari:
1. Bejana atau panci tempat air dengan diameter 127 cm.
2. Termometer apung untuk mengukur suhu udara.
3. Hook Gauge pasang dengan baik untuk mengukur tinggi udara dalam panci.
4. Kayu penopang untuk penyangga panci agar tidak bersentuhan dengan
tanah karena tanah menngandung panas yang akan menambah penguapan.
5. Cup counter anemometer untuk mengukur kecepatan angin rata-rata pada
permukaan udara.
Pengamatan dilaksanakan setiap jam 07.00 WIB (00.00 UTC). Selisih
tinggi air sekarang dengan tinggi air kemarin merupakan jumlah air yang hilang
karena menguap dengan kondisi: suhu udara rata-rata seperti yang ditunjukkan
termometer apung, kecepatan angin rata-rata pada permukaan air seperti yang
ditunjukkan Cup Counter Anemometer. Fungsi alat ini adalah untuk
mengetahui besarnya penguapan radiasi langsung dari matahari.
Cara kerja alat:
Panci penguapan diisi air setinggi 20 cm sehingga di atas rongga 5 cm
pengukuran dilaksanakan pada permukaan air dalam keadaan tenang di dalam

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

Gambar 3.1 Alat-alat evaporasi

3.2 Sensor Ultrasonik HC-SR04


HC-SR04 merupakan sensor ultrasonik yang dapat digunakan untuk
mengukur jarak antara penghalang dan sensor. Sensor ini mampu mendeteksi
jarak tanpa sentuhan langsung dengan akurasi yang tinggi dan pembacaan yang
12

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°

Tabel 3.2 Spesifikasi pin pada Sensor HC-SR04


Nama PIN Keterangan
VCC Sumber tenaga (5V)
Trig Pemicu sinyal sonar dari sensor
Echo Penangkap sinyal sonar dari sensor
GND Ground

Konfigurasi pin dan tampilan sensor HC-SR04 diperlihatkan pada gambar


di bawah ini.

Gambar 3.2 Konfigurasi pin dan tampilan sensor ultrasonik HC-SR04

HC-SR04 memiliki 2 komponen utama sebagai penyusunnya yaitu


ultrasonic transmitter dan ultrasonic receiver. Fungsi dari ultrasonic
transmitter adalah memancarkan gelombang ultrasonik dengan frekuensi 40
KHz kemudian ultrasonic receiver menangkap hasil pantulan gelombang
13

ultrasonik yang mengenai suatu objek. “Jika gelombang ultrasonik berjalan


melaui sebuah medium, Secara matematis besarnya jarak dapat dihitung”
(Ulfah Meidiaty Arief, 2011). Waktu tempuh gelombang ultrasonik dari
pemancar hingga sampai ke penerima sebanding dengan 2 kali jarak antara
sensor dan bidang pantul seperti yang diperlihatkan pada gambar berikut:

Gambar 3.3 Prinsip kerja Sensor HC-SR04

Prinsip pengukuran jarak menggunakan sensor ultrasonik HC-SR04


adalah ketika pulsa trigger diberikan pada sensor, transmitter akan mulai
memancarkan gelombang ultrasonik, pada saat yang sama sensor akan
menghasilkan output TLL transisi naik menandakan sensor mulai menghitung
waktu pengukuran, setelah receiver menerima pantulan yang dihasilkan oleh
suatu objek maka pengukuran waktu akan dihentikan dengan menghasilkan
output TTL transisi turun. Jika waktu pengukuran adalah t dan kecepatan suara
adalah 340 m/s, maka jarak antara sensor dengan objek dihitung dengan
menggunakan persamaan 1 berikut.
𝑡𝑥340𝑚⁄𝑠

𝑠= ...................................................................
.............................. (1)
2

Dimana :
s = Jarak antara sensor dengan objek (m)
t = Waktu tempuh gelombang ultrasonik dari trasmitter ke receiver (s)

3.3 NodeMCU ESP8266


NodeMCU merupakan sebuah open source platform
IoT dan
pengembangan kit yang menggunakan bahasa pemrograman Lua untuk
14

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.

Gambar 3.4 Bentuk fisik NodeMCU ESP8266

Spesifikasi yang dimliki oleh NodeMCU sebagai berikut :


1. Board ini berbasis ESP8266 serial WiFi SoC (Single on Chip) dengan
onboard USB to TTL. Wireless yang digunakan adalah IEE 802.11b/g/n.
2. 2 tantalum capasitor 100 mF dan 10 mF.
3. 3.3v LDO regulator.
4. Blue led sebagai indikator.
5. Cp2102 usb to UART bridge.
6. Tombol reset, port usb, dan tombol flash.
7. Terdapat 9 GPIO yang di dalamnya ada 3 pin PWM, 1 x ADC Channel,
dan pin RX TX.
8. 3 pin ground.
9. S3 dan S2 sebagai pin GPIO
10. S1 MOSI (Master Output Slave Input) yaitu jalur data dari master dan
masuk ke dalam slave, sc cmd/sc.
11. S0 MISO (Master Input Slave Input) yaitu jalur data keluar dari slave dan
masuk ke dalam master.
15

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.

Gambar 3.5 GPIO NodeMCU ESP8266 v3

1. RST : berfungsi mereset modul


2. ADC: Analog Digital Converter. Rentang tegangan masukan 0-1v, dengan
skup nilai digital 0-1024
3. EN: Chip Enable, Active High
4. IO16 :GPIO16, dapat digunakan untuk membangunkan chipset dari mode
deep sleep.
5. IO14 : GPIO14; HSPI_CLK
6. IO12 : GPIO12: HSPI_MISO
7. IO13: GPIO13; HSPI_MOSI; UART0_CTS
8. VCC: Catu daya 3.3V (VDD)
9. CS0 : Chip selection
10. MISO : Slave output, Main input
11. IO9 : GPIO9
12. IO10 GBIO10
13. MOSI: Main output slave input
14. SCLK: Clock
15. GND: Ground
16

16. IO15: GPIO15; MTDO; HSPICS; UART0_RTS


17. IO2 : GPIO2;UART1_TXD
18. IO0 : GPIO0
19. IO4 : GPIO4
20. IO5 : GPIO5
21. RXD : UART0_RXD; GPIO3
22. TXD : UART0_TXD; GPIO1

3.4 RTC DS3231


Modul RTC DS3231 adalah salah satu jenis modul yang dimana berfungsi
sebagai RTC (Real Time Clock) atau pewaktuan digital serta penambahan fitur
pengukur suhu yang dikemas ke dalam 1 module.
Interface atau antarmuka untuk mengakses modul ini yaitu menggunakan
i2c atau two wire (SDA dan SCL). Sehingga apabila diakses menggunakan
mikrontroler misal Arduino Uno pin yang dibutuhkan 2 pin saja dan 2 pin
power.
Dibandingkan dengan RTC DS1302, RTC DS3231 ini memiliki banyak
kelebihan. Sebagai contoh untuk range VCC input dapat disuplai
menggunakan tegangan antara 2.3V sampai 5.5V dan memiliki cadangan
baterai.
Berbeda dengan DS1307, pada DS3231 juga memiliki kristal terintegrasi
(sehingga tidak diperlukan kristal eksternal), sensor suhu, 2 alarm waktu
terprogram, pin output 32.768 kHz untuk memastikan akurasi yang lebih
tinggi.

Gambar 3.6 Bentuk fisik RTC DS3231


17

3.5 Arduino IDE


IDE (Integrated Developtment Enviroenment) secara bahasa mudahnya
merupakan lingkungan terintegrasi yang digunakan untuk melakukan
pengembangan. Disebut sebagai lingkungan karena melalui software inilah
Arduino dilakukan pemrograman untuk melakukan fungsi-fungsi yang
dibenamkan melalui sintaks pemrograman. Arduino menggunakan bahasa
pemrograman sendiri yang menyerupai bahasa C. Bahasa pemrograman
Arduino (Sketch) sudah dilakukan perubahan untuk memudahkan pemula
dalam melakukan pemrograman dari bahasa aslinya. Sebelum dijual ke
pasaran, IC mikrokontroler Arduino telah ditanamkan suatu program bernama
Bootlader yang berfungsi sebagai penengah antara compiler Arduino dengan
mikrokontroler.
Program yang ditulis dengan menggunaan Arduino Software (IDE) disebut
sebagai sketch. Sketch ditulis dalam suatu editor teks dan disimpan dalam file
dengan ekstensi .ino. Pada Arduino IDE terdapat fitur serial monitor yang
dapat digunakan untuk melihat data dari sensor ultrasonik.

Gambar 3.7 Interface Arduino IDE

3.6 Database MySQL


MySQL adalah sebuah sistem manajemen database SQL yang multi-user
dan multithread. Sedangkan PHP MyAdmin adalah perangkat lunak yang
menggunakan bahasa pemrograman PHP yang digunakan untuk mengolah
administrasi MySQL melalui website. PHP MyAdmin mendukung berbagai
18

operasi MySQL, diantaranya mengelola database, tables, fields, relations dan


yang lainnya.

Gambar 3.8 Interface PHPMyAdmin

3.7 MIT App Inventor


App Inventor adalah aplikasi web sumber terbuka yang awalnya
dikembangkan oleh Google, dan saat ini dikelola oleh Massachusetts Institute
of Technology (MIT).
App Inventor memungkinkan pengguna baru untuk memprogram
komputer untuk menciptakan aplikasi perangkat lunak bagi sistem operasi
Android. App Inventor menggunakan antarmuka grafis, serupa dengan
antarmuka pengguna pada Scratch dan StarLogo TNG, yang memungkinkan
pengguna untuk men-drag-and-drop objek visual untuk menciptakan aplikasi
yang bisa dijalankan pada perangkat Android.

Gambar 3.9 Interface MIT App Inventor


BAB IV
ANALISA DAN PEMBAHASAN

4.1 Blok Diagram


Blok Diagram merupakan gambaran alur kerja dari tugas praktik kerja
lapangan kami, yang kami rangkum dalam gambar 4.1.

Transfer Local Host


Data Database

Database

Gambar 4.1 Blok Diagram Kerja

4.2 Rangkaian Hardware


Rangkaian Hardware merupakan rangkaian yang digunakan untuk
menyusun sistem dari tugas ini.
4.2.1 Gambar Rangkaian
Gambar Rangkaian merupakan gambaran dari rangkaian yang akan
dibuat. Gambar rangkaian ini dibuat pada software fritzing, dapat dilihat
pada gambar 4.2.

20
21

Gambar 4.2 Gambar Rangkaian

4.2.2 Rangkaian PCB


Rangkaian PCB merupakan rangkaian yang telah diterapkan dari
gagasan gambar rangkaian. Rangkaian ini menggunakan PCB sebagai
medianya. Serta menggunakan solder dan timah sebagai alat dan
bahannya. Rangkaian PCB dapat dilihat pada gambar 4.3.

Gambar 4.3 Rangkaian PCB

4.3 Arduino IDE


Arduino IDE berfungsi sebagai software programmer yang digunakan
untuk memprogram mikrokontroler NodeMCU-ESP8266. Selain itu Arduino
IDE berfungsi untuk menampilkan data pengujian sensor melalui serial
monitor.
22

Gambar 4.4 Tampilan listing program Arduino IDE

4.3.1 Listing Program


Listing program merupakan susunan program yang berisi fungsi-
fungsi untuk menjalankan koneksi. Listing program pada project ini,
dilampirkan pada lembar lampiran Praktik Kerja Lapangan.

4.3.2 Serial Monitor


Pada Arduino IDE terdapat fitur serial monitor yang berfungsi untuk
menampilkan informasi yang dibutuhkan pengguna. Serial monitor ini
kami gunakan untuk uji coba sensor sebelum data dikirim melalui web.

4.4 PHP MyAdmin dan Database MySQL


PHP MyAdmin merupakan software untuk mempermudah pengoperasian
database. PHP MyAdmin pada project ini berfungsi untuk mengatur database
mulai dari tabel yang digunakan, nama kolom, panjang kolom, dan semua
komponen yang kami gunakan. Sedangkan Database MySQL merupakan
database tempat penyimpanan data. Tampilan database dapat dilihat pada
gambar 4.5.
23

Gambar 4.5 Database MySQL

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.

Gambar 4.6 Server research.student.pnm.ac.id

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.

Gambar 4.7 Listing program koneksi.php

4.5.2 Database.php
Database.php ini berfungsi untuk menghubungkan file php ke
database online.

Gambar 4.8 Listing program database.php

4.5.3 Dataline.php
Dataline.php ini berfungsi untuk mengambil data dari database
online untuk ditampilkan dalam Json.php sebagai grafik.
25

Gambar 4.9 Listing program dataline.php


4.5.4 Simpandata1.php
Simpandata1.php berfungsi untuk menerima data dari prototype
lalu menyimpannya ke dalam database.

Gambar 4.10 Tampilan listing program Simpandata1.php


4.5.5 Indexpenguapan.php
Indexpenguapan.php ini berfungsi untuk mengatur tampilan data
pada web. Terdapat beberapa fungsi untuk mengatur lebar dan letak
tabel serta komponen pendukung lainnya. Tampilan web ini diatur
26

untuk memudahkan pengguna dalam membaca data. Listing program


indexpenguapan.php kami lampirkan pada laporan Praktik Kerja
Lapangan ini.

Gambar 4.11 Tampilan listing program indexpenguapan.php

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

Gambar 4.12 Tampilan listing program Json.php

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.

Gambar 4.13 Listing program hapus.php

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

membacanya. Listing program printpenguapan.php dilampirkan pada


laporan Praktik Kerja Lapangan ini.

Gambar 4.14 Tampilan listing program printpenguapan.php

4.6 Web Tampilan Data


Web tampilan data ini berfungsi untuk menampilkan data dari database
yang telah dihubungkan dengan server. Web ini memudahkan pengguna yang
ingin memantau data melalui laptop/pc. Di dalam web ini dilengkapi pilihan
untuk hapus data, hapus data menyeluruh, dan print data. Print data di sini
berfungsi untuk menyimpan data yang diperoleh dalam bentuk pdf.

Gambar 4.15 Web Tampilan Data


29

Gambar 4.16 Tampilan print data

4.7 Aplikasi Android ATE


4.7.1 Tampilan icon aplikasi ATE
Aplikasi ATE (Automatic Temperature and Evaporation)
merupakan aplikasi yang digunakan untuk menampilkan hasil
monitoring dari alat yang telah dibuat. Tampilan icon merupakan ciri
khusus dari sebuah aplikasi android. Pada icon aplikasi ATE ini, didesain
khusus dengan teks ATE yang memiliki warna dasar putih. Tampilan
icon aplikasi ATE dapat dilihat pada gambar 4.17.

Gambar 4.17 Tampilan icon aplikasi ATE


30

4.7.2 Screen Login


Screen login merupakan screen yang berfungsi untuk jalan masuk
pengguna. Dimana pengguna harus memasukkan username dan
password agar dapat mengakses aplikasi. Tampilan screen login dapat
dilihat pada gambar 4.18.

Gambar 4.18 Tampilan screen login


Pada perancangan screen login terdapat beberapa komponen
penyusun, diantaranya HorizontalArrangement4 yang di dalamnya
terdapat image1 (logo Politeknik Negeri Madiun), label yang ditulis
“Welcome!!” dan image3 (logo ATE) yang dimasukkan ke dalam
VerticalArrangement1, image2 (logo BMKG), serta label incorrect yang
berfungsi sebagai tempat tercetaknya tulisan “Username atau password
salah! Silahkan login kembali” jika username atau password yang
dimasukkan salah. Kemudian terdapat HorizontalArrangement1 yang di
dalamnya terdapat label3 yang ditulis “Username” dan teksbox yang
ditulis “Username”. Teksbox ini berfungsi sebagai wadah bagi pengguna
untuk mengetikkan username. Kemudian HorizontalArrangement2 yang
di dalamnya terdapat label4 yang ditulis “Password” dan teksbox yang
ditulis “Password”. Teksbox ini berfungsi sebagai wadah bagi pengguna
untuk mengetikkan password. Kemudian HorizontalArrangement3 yang
didalamnya terdapat label5 yang berfungsi sebagai space dan button
login. Button login ini berfungsi sebagai tombol bagi pengguna untuk
masuk ke menu selanjutnya.
Blocks fungsi logika dari screen1 dapat dilihat pada gambar 4.19.
31

Gambar 4.19 Blocks logika screen1


Logika awal yang terdapat pada blocks screen1 ini adalah kontrol
button login. Tertulis pada block “When login click do”, maka fungsi
block akan bekerja dan mengeksekusi perintah di dalamnya jika button
login ditekan. Kemudian logika and dimasukkan pada fungsi if untuk
memeriksa apakah teksbox username berisikan “bmkgperak” dan teksbox
password berisikan “bmkgperak”. Jika ya maka akan menampilkan
screen2. Tapi jika salah maka akan menampilkan teks “Username atau
password salah! Silakan login kembali” dan dicetak warna merah pada
label.

4.7.3 Screen2 (Screen Data)


Screen2 (Screen Data) merupakan screen yang berfungsi untuk
menampilkan data yang dimonitoring melalui perangkat hardware
sistem. Tampilan screen data dapat dilihat pada gambar 4.20.

Gambar 4.20 Tampilan screen2


Pada screen2 terdapat beberapa komponen penyusun, diantaranya
HorizontalArrangement1 yang di dalamnya terdapat button suhu,
32

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.

Gambar 4.21 Blocks logika screen2


Terdapat beberapa logika pada blocks screen2 ini, diantaranya
kontrol button suhu, penguapan, grafik, logout, dan notifier. Sesuai
dengan judul tugas kami yaitu “Sistem Monitoring Evaporasi Berbasis
Android”, maka penulis hanya akan membahas tentang penguapannya
saja. Pada logika button penguapan, terdapat “When uap click do” maka
akan mengeksekusi program di dalamnya jika button penguapan ditekan.
Setelah itu “Call WebViewer1 .GoTourl” maka akan memanggil
WebViewer1 untuk menuju ke url yang telah di tulis didalam “url”. Link
url yang kami tulis ke dalam url merupakan link yang sudah kami penulis
dalam PHP MyAdmin. WebViewer1 berfungsi untuk menampilkan data
yang terdapat dalam link tersebut.
33

Kemudian terdapat button grafik yang di dalamnya terdapat logika


sama seperti button penguapan. Button grafik ini berfungsi untuk
menampilkan data yang telah diambil dalam bentuk grafik. Kemudian
terdapat logika logout. Terdapat “when logout click do”, maka akan
mengeksekusi perintah di dalamnya jika button logout ditekan. “call
Notifier1 .ShowChooseDialog message “Yakin ingin keluar?” tittle
“logout” button1Text “Ya” button2Text “Tidak” cancelable false”,
maka akan memanggil notifier1 dimana notifire1 akan menampilkan
dialog message pilihan Ya atau Tidak.
Kemudian terdapat “when Notifier1 AfterChoosing choice do if get
choice = Ya then close screen” maka ketika notifier1 telah dipilih dan
jika pilihannya adalah Ya maka akan keluar dari screen. Kemudian
“when screen2 BackPressed do call Notifier1 .ShowChooseDialog”
maka ketika screen2 kembali ditekan akan memanggil notifier1 kembali
dan menampilkan dialog message seperti pada button logout.

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

Gambar 4.22 Prinsip kerja pengambilan data

Jarak sensor dengan air diperoleh dengan memanfaatkan prinsip


dasar dari Sensor HC- SR04. Sesuai dengan rumus yang digunakan
BMKG dimana tinggi air kemarin dikurangi tinggi air hari ini, maka kami
juga menggunakan rumus yang serupa agar dapat dibandingkan dengan
alat evaporasi. Berikut merupakan persamaan 3 yang digunakan untuk
mengukur penguapan pada alat ini.
Penguapan = Ketinggian kemarin (mm) – Ketinggian hari ini (mm) (3)

4.8.2 Pengujian Hardware


Pada tahap pengujian, pengujian dilakukan terlebih dahulu pada
hardware perangkat. Dimana pengujian ini dilakukan langsung pada
panci penguapan yang telah terisi air sebelumnya kira-kira dengan
ketinggian 150 - 200 ml. Pengujian dilakukan selama 4 hari mulai dari
jam 00 UTC (07.00 WIB) hingga ke 00 UTC (07.00 WIB) hari
berikutnya. Pengambilan data dilakukan 3 jam sekali untuk memantau
setiap air yang menguap, seperti pada tabel di bawah ini.
Tabel 4.1 Data Pengujian Hari Pertama (23 Agustus 2019)
Waktu Ketinggian kemarin Ketinggian hari ini
No
(WIB) (mm) (mm)
1 15:51:04 152.99 150.21
2 18:51:05 152.99 148.49
3 21:51:04 152.99 147.46
4 00:51:04 152.99 151.58
5 03:51:04 152.99 150.55
6 06:51:05 152.99 145.05
Jumlah Penguapan (mm) 7.94
35

Tabel 4.2 Data Pengujian Hari Kedua (25 Agustus 2019)


Waktu Ketinggian kemarin Ketinggian hari ini
No
(WIB) (mm) (mm)
1 6:51:06 139.9 139.9
2 9:51:07 139.9 143.68
3 12:51:04 139.9 140.58
4 15:51:04 139.9 132.68
5 18:51:05 139.9 135.43
6 21:51:04 139.9 134.05
7 00:51:04 139.9 138.18
8 03:51:04 139.9 137.2
9 06:51:05 139.9 137.15
Jumlah Penguapan (mm) 2.75

Tabel 4.3 Data Pengujian Hari Ketiga (26 Agustus 2019)


Waktu Ketinggian kemarin Ketinggian hari ini
No
(WIB) (mm) (mm)
1 6:51:06 137.15 137.15
2 9:51:07 137.49 139.55
3 12:51:04 137.49 139.55
4 15:51:04 137.49 135.43
5 18:51:05 137.49 134.05
6 21:51:04 137.49 133.02
7 00:51:04 137.49 132.68
8 03:51:04 137.49 131.99
9 06:51:05 137.49 132.34
Jumlah Penguapan (mm) 5.15

Tabel 4.4 Data Pengujian Hari Keempat (27 Agustus 2019)


Waktu Ketinggian kemarin Ketinggian hari ini
No
(WIB) (mm) (mm)
1 6:51:06 177.7 177.6
2 9:51:07 177.7 177.7
3 12:51:04 177.7 177.35
4 15:51:04 177.7 177.92
5 18:51:05 177.7 173.89
6 21:51:04 177.7 172.51
7 00:51:04 177.7 171.17
36

8 03:51:04 177.7 171.17


9 06:51:05 177.7 171.17
Jumlah Penguapan (mm) 6.53

4.8.3 Pengujian Aplikasi Android (ATE)


Kami juga melakukan pengujian terhadap aplikasi android ATE.
Pengujian ini dilakukan untuk mengetahui apakah aplikasi android ATE
sudah berjalan sesuai yang diharapkan atau tidak. Terdapat beberapa
pengujian untuk aplikasi android ATE, diantaranya:
1. Pengujian Screen Login
Pengujian screen login dilakukan dengan cara memasukkan
username dan password dengan sembarang kata, dan akan
menampilkan tulisan yang telah kami atur. Tampilannya dapat dilihat
pada gambar 4.23.

Gambar 4.23 Pengujian incorrect screen login


Kemudian, penulis memasukkan username dan password sesuai
dengan pengaturan yaitu “bmkgperak” dan menu screen2 berhasil
terbuka. Tampilannya dapat dilihat pada gambar 4.24.

Gambar 4.24 Pengujian screen login


37

2. Pengujian Button Penguapan


Pengujian button penguapan dilakukan dengan cara menekan
button penguapan, dan WebViewer1 akan menampilkan database
yang telah kami buat pada PHP MyAdmin. Tampilan pengujian dapat
dilihat pada gambar 4.25.

Gambar 4.25 Pengujian button penguapan

3. Pengujian Button Grafik Pengamatan


Pengujian button grafik pengamatan dengan cara menekan
button, maka akan menampilkan grafik pengamatan dimana data suhu
dan penguapannya tercatat pada grafik ini. Dapat dilihat pada gambar
4.26.

Gambar 4.26 Pengujian button grafik pengamatan


38

4. Pengujian Button Logout


Pengujian button logout dilakukan dengan cara menekan button
logout, maka akan menampilkan dialog message seperti pada gambar
4.27.

Gambar 4.27 Pengujian button logout


Kemudian, kami menekan pilihan Tidak dan masih berada pada
screen2. Lalu kami menekan pilihan Ya dan berhasil keluar dari
screen2.

4.9 Tingkat Kesalahan (Error)


Setelah pengujian hardware dan aplikasi android ATE, maka kami
membandingkan data yang telah diambil dari hardware dengan data yang
diambil melalui alat evaporasi. Adapun untuk menghitung tingkat kesalahan
(error) dengan menggunakan persamaan 4.
𝑃𝑒𝑛𝑔𝑢𝑗𝑖𝑎𝑛 𝑚𝑎𝑛𝑢𝑎𝑙−𝑃𝑒𝑛𝑔𝑢𝑗𝑖𝑎𝑛 ℎ𝑎𝑟𝑑𝑤𝑎𝑟𝑒
% 𝑒𝑟𝑟𝑜𝑟 = 𝑥 100% (4)
𝑃𝑒𝑛𝑔𝑢𝑗𝑖𝑎𝑛 𝑚𝑎𝑛𝑢𝑎𝑙

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

Arief, U. M. (2011). Pengujian Sensor Ultrasonik PING untuk Pengukuran Level


Ketinggian. Makassar: Universitas Hasanuddin.

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/

Lukito, Ibnu Sofyan. 2010, Automatic Evaporation Station (AES). Jakarta:


Universitas Indonesia.

Nugroho, Devis Setyo. 2015, Perancangan Sistem Peralatan Evaporimeter Digital


untuk Panci Penguapan. Tangerang Selatan: STMKG.

P, R. Antreas. (2019, Februari 19). 17 Peralatan Klimatologi yang Digunakan


BMKG. Dikutip Juli 26, 2019, dari tagar.id: https://www.tagar.id/17-peralatan-
klimatologi-yang-digunakan-bmkg
LAMPIRAN
LAMPIRAN 1 LISTING PROGRAM ARDUINO IDE

#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 {

USE_SERIAL.printf("[HTTP]GET GAGAL, error:


%s\n",http.errorToString(httpCode).c_str());
}
http.end();
}
}
else if((now.hour()==10 && now.minute()==40 &&
now.second()==00)||(now.hour()==12 && now.minute()==00
&& now.second()==00)||(now.hour()==11 &&
now.minute()==30 && now.second()==00)||(now.hour()==9
&& now.minute()==50 && now.second()==00) ||
(now.hour()==12 && now.minute()==50 &&
now.second()==00) || (now.hour()==15 &&
now.minute()==50 && now.second()==00) ||(now.hour()==18
&& now.minute()==50 && now.second()==00) ||
(now.hour()==21 && now.minute()==50 &&
now.second()==00) || (now.hour()==00 &&
now.minute()==50 && now.second()==00) || (now.hour()==3
&& now.minute()==50 && now.second()==00)) {
jarak2=ukur();
//jarak2 = 0.9693*jarak2 + 5.2961;
jarak2= bak - jarak2;
Serial.println("jarak2= ");
Serial.println(jarak2);

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

float tempRead = ((MSB << 8) | LSB); //using two's


compliment float TemperatureSum = tempRead / 16;

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 &copy; 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>

<meta http-equiv="refresh" content="10"/>


<body>
<div id="notif"></div>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2
/jquery.min.js";;></script>
<script type="text/javascript">
var last = 0;
function check(){
var url = 'cek.php?last='+last;
$.get(url, {}, function(resp){
if(resp.result != false){
$("#notif").html(resp.result);
last = resp.last;
}
setTimeout("check()", 1000);
}, 'json');
}
$(document).ready(function(){
check();
});
</script>
<div class="header">
<button onclick="goBack()"
class="button1"><span>Kembali</span></button>
<script>
function goBack() {
window.history.back();
}
</script>

<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)){
?>

<?php echo $d['jarak1']; ?>


<?php
}
?> </td>
</tr>
<tr>
<td bgcolor="#C0C0C0">Pengukuran terakhir kedua
(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)){
?>

<?php echo $d['jarak2']; ?>


<?php
}
?></td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”>Penguapan (mm) </td>
<td bgcolor=”#FFFFFF”> = </td>
<td bgcolor=”#FFFFFF”>
<?php
include 'koneksi.php';
$data = mysqli_query($koneksi,"SELECT * FROM pkl
ORDER BY id DESC LIMIT 1 ");
while($d = mysqli_fetch_array($data)){
?>

<?php $a = $d['jarak1']; $b = $d['jarak2'];


echo ($a-$b);
?>
<?php
}
?></td>
</table>
<p><script>window.setTimeout("waktu()", 1000);
function waktu() {
var waktu = new Date();
setTimeout("waktu()", 1000);
document.getElementById("jam").innerHTML =
waktu.getHours();
document.getElementById("menit").innerHTML =
waktu.getMinutes();
document.getElementById("detik").innerHTML =
waktu.getSeconds();
}
var tanggallengkap = new String();
var namahari = ("Minggu Senin Selasa Rabu Kamis
Jumat Sabtu");
namahari = namahari.split(" ");
var namabulan = ("Januari Februari Maret April Mei
Juni Juli Agustus September Oktober Nopember
Desember");
namabulan = namabulan.split(" ");
var tgl = new Date();
var hari = tgl.getDay();
var tanggal = tgl.getDate();
var bulan = tgl.getMonth();
var tahun = tgl.getFullYear();
tanggallengkap = namahari[hari] + ", " +tanggal +
" " + namabulan[bulan] + " " + tahun;
</script>
<div class="jam-digital">
<div class="kotak">
<p id="jam"></p>
</div>
<div class="kotak">
<p id="menit"></p>
</div>
<div class="kotak">
<p id="detik"></p>
</div>
</div>
<div class="Tanggal">
Tanggal : <script
language="JavaScript">document.write(tanggallengka
p);
</script><br>
</div>
</p>
<div class="print">
<a href="printpenguapan.php"
target="_BLANK"><button class="button"><span>Print
Data</span></button></a>
<br></div>
<div class="blink">
<p><img class="gambar" src="clebisonza-Aten-
o.png"></p>
</div>
<div class="blink">
<p class="up">Hapus Data Akan menghapus semua
data, pastikan Print Data terlebih dahulu
<br>Catatan: Menghapus Data Penguapan akan
menghapus juga data suhu</p>
</div>
<div class="w3-container">
<p></p>
</div>
<footer class="w3-container w3-teal"> <center>
<p class="text-center">Copyright &copy; 2019,
DTC. Developed by TEAM PKL Baldo
halilintar</p></center>
</footer>
</body>
</html>

 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>

<center class="judul"><h2>DATA ALAT:


PENGUAPAN</h2></center><br>
</div>
<form action="hapushp.php" method="post">
<table border="1" width="500px" align="center">
<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>
</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>
</tr>
<?php
}
?>
</table>
<hr class="garis">
</form>
<div class="w3-container">
<table width="450px" align="center">
<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)){
?>
<?php echo $d['jarak1']; ?>
<?php
}
?> </td>
</tr>
<tr>
<td bgcolor="#C0C0C0">Pengukuran terakhir kedua
(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)){
?>
<?php echo $d['jarak2']; ?>
<?php
}
?></td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”>Penguapan (mm) </td>
<td bgcolor=”#FFFFFF”> = </td>
<td bgcolor=”#FFFFFF”>
<?php include 'koneksi.php';
$data = mysqli_query($koneksi,"SELECT * FROM pkl
ORDER BY id DESC LIMIT 1 ");
while($d = mysqli_fetch_array($data)){
?>
<?php $a = $d['jarak1']; $b = $d['jarak2'];
echo ($a-$b);?>
<?php
}
?></td>
<td>
</table>
<script>
window.print();
</script>
<p>Catatan: Menghapus Data penguapan akan menghapus
juga data suhu</p>
</div>
<footer class="w3-container w3-teal"> <center>
<p class="text-center">Copyright &copy; 2019, DTC.
Developed by TEAM PKL Baldo halilintar</p></center>
</footer>
</body>
</html>
LAMPIRAN 3. MONITORING BIMBINGAN
LAMPIRAN 4. SURAT PENGANTAR
LAMPIRAN 5. SURAT BALASAN PKL
LAMPIRAN 6. DATA PKL
LAMPIRAN 7. FOTO KEGIATAN PKL
LAMPIRAN 8. PRESENSI PKL
LAMPIRAN 9. JURNAL KEGIATAN PKL
LAMPIRAN 10. PENILAIAN PEMBIMBING PERUSAHAAN
LAMPIRAN 11. SURAT KETERANGAN TELAH MELAKSANAKAN PKL

Anda mungkin juga menyukai