BAB III PERANCANGAN PROGRAM

Transkripsi

1 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

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

3 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

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

5 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

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

7 18 REW LEVEL AIR No Time Level Air 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.

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

9 20 Gambar 3.11 New 8. New didalam index.php berfungsi untuk memanggil document class untuk membuat sebuah elemen baru.

10 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

11 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

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

13 Gambar 3.16 class peging.php 24

14 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

15 Rancangan tampilan pada internet adalah sebagai berikut : LEVEL AIR 2 (Kondisi terbaru ketinggian air/cm) REWDATA LEVEL AIR No Time Level Air Ketinggian Air.. cm ( Kondisi ) Class peging Gambar 3.18 Rancangan layar yang akan ditampilkan pada internet

16 27 Tabel 3.0 Keterangan Rancangan Tampilan Pada Internet No Urutan pada style.css Tampilan pada web/internet Keterangan 1 Body Body terluar pada layar Gambar 3.18 internet level ketinggian air 2 Head LEVEL AIR Gambar Head 1 Kondisi terbaru ketinggian air Gambar Head 3 REW DATA LEVEL AIR Gambar Td Spasi,pada rewdata air Gambar S batas Utk batasan baris 1 s/d baris 5 Gambar Countain Body pada level air Gambar Th Jarak pada lebar no,time,level air Gambar Class peging Melihat gambar farst,previous, next dan last Gambar Tabel border1 dst Untuk kolom pada table Gambar 3.18