BAB III PERANCANGAN PROGRAM
3.1 Penjelasan Flowchart Berikut adalah flowchart Program dalam pengujian Leveling ketinggian air secara garis besar:
Gambar 3.1 Flowchart tahapan Proses Program 12
13
Langkah awal kerja monitoring level air ini yaitu :
1. Mempersiapkan arduino juga sensor ping yang dipasang dibagian atas permukaan air yang akan diujikan.
Gambar 3.2 Arduino Arduino merupakan pengendali mikro single-board yang bersifat open-source, diturunkan dari wiring platform, dirancang untuk memudahkan penggunaan elektronika dalam berbagai bidang.Hardwarenya memiliki bahasa pemograman sendi
Gambar 3.3 Sensor Ping
Sensor ping merupakan sensor ultrasonic yang dapat mendeteksi jarak objek dengan cara memancarkan gelombang ultrasonic dengan frekuensi 40 khz dan kemudian mendeteksi pantulannya.gambar 3.3 merupakan tampilan sensor PING. Sensor ini dapat mengukur jarak antara 3 cm sampai 300 cm.
14
2. Setelah itu sensor ping akan membaca ketinggian air dengan mengambil nilai atau jarak pantul dari air ke sensor ping yaitu dari receiver ke transmitter dan kemudian akan disimpan kedalam database
3. Kemudian akan ditampilkan waktu dan level air pada internet atau web yang akan dibuka
4. Setelah itu maka akan ditampilkan level ketinggian air. Yaitu kondisi air posisi aman, kondisi air posisi warning dan kondisi air posisi berbahaya.
3.2 Cara kerja program monitoring leveling ketinggian air adalah sebagai berikut :
Gambar 3.4 Submit.php
15
1. Pada Gambar 3.4 menunjukkan penerimaan awal oleh file submit. php yang berfungsi menerima lavel air atau jarak air yang dikirim oleh arduino. Didalam File submit. php terdapat error reporting yang berfungsi untuk mengatasi terjadinya error atau perbedaan versi pada file Xampp dan juga terdapat include yang berfungsi memanggil atau mengoneksikan file submit. php ke file connect. php.
Gambar 3.5 Connect.Php
2. Pada gambar 3.5 menunjukkan connect. php yang bertugas menghubungkan semua file yang dibutuhkan dari Data based dan sebagai pengatur connecting dari php ke data based. Didalam file connect terdapat mysql connect sebagai local house, sebagai user name dan sebagai password.
16
Gambar 3.6 index.php
3. Pada gambar 3.6 menunjukkan index. php bertugas mengoneksikan tampilan level level air tersebut ke webside atau internet.
Dalam file index .php
terdapat if yang berfungsi sebagai pengatur level level ketinggian air yaitu jarak Aman, jarak Warning, dan jarak Berbahaya yang dapat diatur pada pada If
Gambar 3.7 If
17
4. Pada gambar 3.7 if sebagai pengaturan level level ketinggian air yang diatur oleh simbol < (lebih kecil dari) atau simbol > (lebih besar dari)
untuk
mengatur batasan batasan ketinggian air Aman, warning ,dan berbahaya
Gambar 3.8 Echo
5. Dalam file index.php terdapat echo sebagai tampilan warna level level ketinggian air dalam ukuran sentimeter (cm) .Warna red width sebagai tanda kondisi Berbahaya, warna orange width sebagai tanda kondisi Warning, dan warna White width sebagai tanda kondisi Aman.
18
REW LEVEL AIR No
Time
Level Air
1 2 3 4 5
Gambar 3.9 Rew level air 5 baris
6. New pada index.php berfungsi sebagai kolom maksimal yang ditampilkan pada REW LEVEL AIR contohnya sebanyak lima baris update level air di internet.
19
Gambar 3.10 While
7. Dalam file index. php terdapat While pada gambar 3.10 yang berfungsi sebagai lopping databased dan menampilkan seluruh data yang ada didatabased. While berfungsi untuk memberikan perubahan waktu, tanggal, bulan, tahun dan jam.
20
Gambar 3.11 New 8. New didalam index.php berfungsi untuk memanggil document class untuk membuat sebuah elemen baru.
21
Gambar 3.12 Save document
9. Yang terakhir lakukan save program yang telah dibuat kedalam bentuk file new.xml
Gambar 3.13 style.css
22
10. Masuk kedalam style.css Tampilan pada web dibentuk didalam style.css. Style berfungsi latar dari tampilan dalam web.Boby berfungsi sebagai tampilan pada latar belakang web. Dengan cara memasukkan image apa saja dan dapat digunakan sebagai latar belakang web.Head sebagai tampilan pada LEVEL AIR. H1 sebagai tampilan tingkat ketinggian air.
Gambar 3.14 style.css
23
11. Pada gambar 3.14 menunjukkan h2, h3, yang berfungsi sebagai dan countain yang berfungsi sebagai penunjuk ukuran air yang terbaru pada saat diukur. Dan countain sebagai garis tepih pada kolom bagian dalam tampilan web.
Gambar 3.15 Table
12. Pada gambar 3.15 table sebagai pengatur lebar table pada tampilan leveling ketinggian air.
24
Gambar 3.16 class peging.php
25
13. Pada gambar 3.16 class peging berfungsi untuk mencek halaman dan posisi data yang baru hingga data ketinggian air yang telah lewat.
Gambar 3.17 style.css
14. Pada gambar 3.17 didalam style.css sebagai pengatur dalam table leveling ketinggian air
26
3.3 Rancangan tampilan pada internet adalah sebagai berikut :
2
LEVEL AIR (Kondisi terbaru ketinggian air/cm)
3
Ketinggian Air …….. cm ( Kondisi )
7 4
REWDATA LEVEL AIR No
Time
Level Air
1
8 5
2 6
3 4
1
5 10 Class peging
Gambar 3.18 Rancangan layar yang akan ditampilkan pada internet
9
27
Tabel 3.0 Keterangan Rancangan Tampilan Pada Internet
No Urutan pada style.css 1 Body
Tampilan pada web/internet
Keterangan Gambar 3.18
2
Head
Body terluar pada layar internet level ketinggian air LEVEL AIR
3
Head 1
Kondisi terbaru ketinggian air
Gambar 3.18
4
Head 3
REW DATA LEVEL AIR
Gambar 3.18
5
Td
Spasi,pada rewdata air
Gambar 3.18
6
S batas
Utk batasan baris 1 s/d baris 5
Gambar 3.18
7
Countain
Body pada level air
Gambar 3.18
8
Th
Jarak pada lebar no,time,level air
Gambar 3.18
9
Class peging
Melihat gambar farst,previous, next dan last
Gambar 3.18
10
Tabel border1 dst
Untuk kolom pada table
Gambar 3.18
Gambar 3.18
