bab ii tinjauan pustaka

BAB II
TINJAUAN PUSTAKA
2.1 TINJAUAN PUSTAKA
Penelitian yang telah dilakukan sebelumnya dengan judul “Pemantau Level
Ketinggian Air Secara Realtime Dan Terekam Berbasis Arduino”. Bertujuan
merekam level ketinggian air yang dapat diamati secara realtime melalui lcd grafik.
Sistem tersebut dapat memantau ketinggian air selama 24 jam, sehingga jika terjadi
perubahan level ketinggian air yang berpotensi banjir, pemerintah ataupun
masyarakat setempat segera dapat mengantisipasi dampak buruk dari banjir itu
sendiri. (Nurainy, 2014)
Penelitian yang telah dilakukan sebelumnya dengan judul “Alarm SMS
Pemantau ketinggian Air Non Contac System Berbasis Mikrokontroler”. Tujuan dari
penelitian ini membuat alarm sms yang ditunjukan melalui handphone tertentu dalam
pemantau ketinggian air non contact system dengan sensor GPD12 berbasis
mikrokontroler ATMega8535 dan salah satu alternatif peringatan dini banjir selain
dengan biaya SMS murah, masyarakat akan lebih cepat menerima peringatan banjir.
Penggunaan non contact system untuk sensor saat ini mulai populer, hasil yang
didapat jika menggunakan sensor dapat secara realtime, selain itu dapat
meminimalkan faktor kesalahan. (Mantafuly, 2011)
Pada penelitian yang telah dilakukan sebelumnya mengindikasikan bahwa
yang berjudul “Sistem Pemantauan Ketingian Air Berbasis Mikrokontroler Basic
Stamp-2 Menggunakan Memory Stick Sebagai Penyimpan Data”. Bertujuan untuk
memantau ketinggian air. Sensor yang digunakan adalah sensor ultrasonik yang
dapat mengukur jarak maksimum hingga 300 cm dengan resolusi 1 cm. Berat total
alat yang dirancang lebih kurang 0,7 kilogram. Cara kerja alat ini yaitu
mikrokontroler di aktifkan dengan tegangan 5 V dari sumber tegangan dan
5
6
melakukan instruksi dari software yang telah di desain. Sensor ultrasonik
memancarkan gelombang ultrasonik melalui transmitter sesuai dengan kontrol
mikrokontroler dengan kecepatan di udara 344 m/s, mengenai objek dan memantul
kembali menuju receiver. Sensor mengeluarkan pulsa output high pada pin SIG
setelah memancarkan gelombang ultrasonik dan setelah gelombang terdeteksi sensor
ultrasonik akan membuat output low pada pin SIG. Lebar pulsa high akan sesuai
dengan lama waktu tempuh gelombang ultrasonik untuk 2 kali jarak ukur dengan
objek. Lebar pulsa minimum adalah 115 μs dan pulsa maksimumnya 18,5 ms. Jarak
yang didapatkan kemudian akan disimpan di dalam flashdisk dan ditampilkan pada
monitor apabila masih terhubung. Alat ini mampu memantau selama 24 jam dan
menyimpan data maksimum 65535 data. Pada pengujian ini terdapat perbandingan
antara pengukuran secara manual dan menggunakan alat dengan kesalahan
maksimum 6.34 %, dan presisi minimum 92.01 %. (Saleh, 2013)
Penelitian sebelumnya yang dijadikan acuan dengan judul “Sistem Informasi
Ketinggian Air Melalui Media Twitter Berbasis Arduino”. Tujuan dari penelitian ini
untuk memberikan informasi langsung kepada masyarakat secara cepat dengan cara
memposting test secara update dan realtime. Prototipe sistem terdiri dari perangkat
keras mikrokontroler Arduino Uno R3, Ethernet Shield compatible Arduino Uno, dan
pengaplikasian sensor jarak / Ultrasonik HC-SR04. Perangkat lunak mikrokontroler
menggunakan Bahasa C menggunakan Arduino IDE versi 1.0.5.r2. Sistem ini bekerja
dengan mengambil data ketinggian air lewat sensor dan kemudian diposting langsung
ke twitter secara otomatis. (Devin, 2014)
Penelitian yang telah dilakukan sebelumnya dengan judul “Telemetri
Pemantau Ketinggian Air Sungai Melalui Komputer Teroptimasi Database Berbasis
SMS”. Tujuan dari penelitian ini yaitu Pengiriman data jarak jauh dilakukan dengan
memanfaatkan media komunikasi seluler GSM, berupa fitur SMS (Short Message
Service) untuk dapat mengirimkan pesan teks berupa data informasi ketinggian air
pada suatu ketika ke komputer di pusat pemantau (server). SMS merupakan salah
7
satu layanan pesan teks yang dikembangkan dan distandarisasi oleh suatu badan yang
bernama ETSI, yang berfungsi untuk mengirim dan menerima pesan-pesan teks
dengan panjang sampai dengan 160 karakter melalui jaringan GSM. (Yusman, 2013)
2.2 DASAR TEORI
2.2.1 Arduino
Pada situs resmi Arduino (http://arduino.cc), Arduino merupakan sebuah
platform elektronik yang open source, berbasis pada software dan hardware yang
fleksibel dan mudah digunakan. Nama Arduino tidak hanya digunakan untuk
menamai board rangkaianya saja, tetapi juga untuk menamai bahasa, Software
pemrogramannya, dan lingkungan pemrogramannya atau Integrated Development
Environment (IDE). Hingga saat ini telah ada banyak board Arduino yang telah
dirilis dengan spesifikasi yang berbeda-beda sesuai dengan aplikasi yang digunakan,
seperti Arduino BT dimana dalam Arduino ini telah ditanamkan modul bluetooth
untuk komunikasi nirkabel. Pada pembuatan proyek akhir ini digunakan board
Arduino Uno R3.
2.2.1.1 ARDUINO UNO
Arduino Uno adalah board mikrokontroler berbasis ATmega328 (datasheet).
Arduino Uno memiliki 14 pin input dari output digital dimana 6 pin input tersebut
dapat digunakan sebagai output PWM dari 6 pin input analog, 16 MHZ osilator
kristal, koneksi USB, jack power, ICSP header, dan tombol reset. Untuk mendukung
mikrokontroler agar dapat digunakan cukup hanya menghubungkan board Arduino
Uno ke komputer dengan menggunakan kabel USB atau listrik dengan AC yang ke
adaptor DC atau baterai untuk menjalankankannya. Arduino Uno menggunakan
ATmega16U2 yang di program sebagai USB-to-serial converter untuk komunikasi
serial ke komputer melalui port USB. Tampak atas dari arduino dapat dilihat pada
Gambar 2.1.
8
Adapun data teknis board Arduino Uno R3 adalah sebagai berikut:

Mikrokontroler : ATmega328

Tegangan Operasi : 5V

Tegangan Input (recommended) : 7-12 V

Tegangan Input (limit) : 6-20 V

Pin digital I/O : 14 (6 diantaranya PWM)

Pin Analog Input : 6

Arus DC per pin I/O : 40 mA

Arus DC untuk pin 3.3 V : 150 mA

Flash Memory : 32 KB dengan 0.5 KB digunakan untuk bootloader

SRAM : 2 KB

EEPROM : 1 KB

Kecepatan Pewaktuan : 16 Mhz
Gambar 2.1 Arduino Uno
2.2.1.2 Pin Masukan Arduino Uno
Masing-masing dari 14 pin arduino uno data digunakan sebagai masukan
ataupun keluaran menggunakan fungsi pin Mode(). Digital Write() dan digital
Read(). Setiap pin beroprasi pada tegangan 5 volt. Setiap pin mampu menerima
9
atau menghasilkan arus maksimum sebesar 40 mA dan memiliki resistor pull-up
internal (diputus secara default) sebesar 20-30 KOhm. Sebagai tambahan.
Beberapa pin masukan digital memiliki keunggulan khusus yaitu:

Komunikasi serial: pin 0 (RX) dan pin 1 (TX), digunakan untuk
menerima(RX) dan mengirim(TX) data secara serial.

External Interrupt: pin 2 dan pin 3, pin ini dapat di konfigurasi untuk memicu
sebuah interrupt pada nilai rendah, sisi naik atau turun, atau pada saat terjadi
perubahan nilai.

Pulse-width modulation (PWM): pin 3, 5, 6, 9, 10 dan 11 menyediakan
keluaran PWM 8-bit dangan menggunakan fungsi analogWrite().

Serial Peripheral Interface (SPI): pin 10 (SS), 11 (MOSI), 12 (MISO) dan 13
(SCK), pin ini mendukung komunikasi SPI dengan menggunakan SPI library.

LED: pin 13, terdapat built-in LED yang terhubung ke pin digital 13. Ketika
pin bernilai HIGH maka LED menyala, sebaliknya ketika pin bernilai LOW
maka LED akan padam.
Arduino Uno memiliki 6 masukan analog yang diberi label A0 sampai A5,
setiap pin menyediakan resolusi sebanyak 10 bit (1024 nilai yang berbeda).
Secara default pin mengukur nilai tegangan dari ground (0V) hingga 5V,
walaupun begitu dimungkinkan untuk mengganti nilai batas atas dengan
menggunakan pin AREF dan fungsi analog Reference(). Sebagai tambahan
beberapa pin masukan analog memiliki fungsi khusus yaitu pin A4 (SDA) dan pin
A5 (SCL) yang digunakan untuk komunikasi Two Wire Interface (TWI) atau
Inter Integrated Circuit (I2C) dengan menggunakan Wire library.
2.2.1.3 Bahasa Dan Struktur Pemograman Arduino
Arduino board merupakan perangkat yang berbasiskan mikrokontroler.
Perangkat lunak (software) merupakan komponen yang membuat sebuah
10
mikrokontroller dapat bekerja. Arduino board akan bekerja sesuai dengan
perintah yang ada dalam perangkat lunak yang ditanamkan padanya.
Bahasa Pemrograman Arduino adalah bahasa pemrograman utama yang
digunakan untuk membuat program untuk arduino board. Bahasa pemrograman
arduino menggunakan bahasa pemrograman C sebagai dasarnya. Karena bahasa
pemrograman arduino memiliki banyak sekali kemiripan.
Setiap program dalam arduino board terdiri dari dua fungsi utama yaitu
setup() dan loop(). Instruksi yang berada dalam fungsi setup() dieksekusi hanya
sekali, yaitu ketika arduino board pertama kali dihidupkan. Biasanya instuksi
yang berada pada fungsi setup() merupakan konfigurasi dan inisialisasi dari
arduino board. Instruksi yang berada pada fungsi loop() dieksekusi berulangulang hingga arduino board dimatikan (catu daya diputus). Fungsi loop()
merupakan tugas utama dari arduino board. Jadi setiap program yang
menggunakan bahasa pemrograman arduino memilliki struktur sebagai berikut:
Program diatas dapat dianalogikan dalam bahasa C sebagai berikut:
11
2.2.1.4 Fungsi Masukan Dan Keluaran Digital
Arduino memiliki 3 fungsi untuk masukan dan keluaran digital pada arduino
board, yaitu pin Mode(), digital Write() dan digital Read(). Fungsi pin Mode()
meng-konfigurasi pin tertentu untuk berfungsi sebagai masukan atau keluaran.
Sintaksis untuk fungsi pin Mode() adalah sebagai berikut:

pinMode(pin, mode)

Parameter: pin = angka dari pin digital yang akan dikonfigurasi

mode = konfigurasi yang diinginkan (INPUT, INPUT_PULLUP
dan OUTPUT).
Fungsi digital Write() berfungsi untuk memberikan nilai HIGH atau LOW suatu
digital pin. Sintaksis untuk fungsi digital Write() adalah sebagai berikut:

Parameter: pin = angka dari pin digital yang akan dikonfigurasi

value = nilai yang diinginkan (HIGH atau LOW).

Fungsi digital Read() bertujuan untuk membaca nilai yang ada pada
pin arduino uno.
Sintaksis untuk fungsi digital Read() adalah sebagai berikut:
Digital Read(pin)
Parameter: pin = angka dari pin digital yang akan dibaca.
Berikut ini adalah contoh penggunaan fungsi masukan dan keluaran digital dalam
sebuah program:
int ledPin = 13; // LED terhubung ke pin digital 13
int inPin = 7; // pushbutton terhubung ke pin digital 7
int val = 0; // variable untuk menyimpan sebuah nilai
void setup()
{
pinMode(ledPin,
OUTPUT);
//
set
pin
digital
13
sebagai
keluaran
pinMode(inPin, INPUT); // set pin digital 13 sebagai masukan
}
12
void loop()
{
val = digitalRead(inPin); // baca nilai pin input
digitalWrite(ledPin, val); // sets LED sesuai dengan nilai
val
}
2.2.1.5 Arduino Development Environment
Arduino Development Environment terdiri dari editor teks untuk menulis
kode, sebuah area pesan, sebuah konsol, sebuah toolbar dengan tombol-tombol
untuk fungsi yang umum dan beberapa menu.Arduino Development Environment
terhubung ke arduino board untuk meng-upload program dan juga untuk
berkomunikasi dengan arduino board.
Perangkat lunak yang ditulis menggunakan Arduino Development
Environment disebut sketch. Sketch ditulis pada editorteks. Sketch disimpan
dengan file berekstensi .ino. Area pesan memberikan memberikan informasi dan
pesan error ketika pengguna menyimpan atau membuka sketch. Konsol
menampilkan output teks dari Arduino development environment dan juga
menampilkan pesan error ketika pengguna meng-compile sketch. Pada sudut
kanan bawah dari jendela Arduino Development Environment menunjukkan jenis
board dan port serial yang sedang digunakan. Tombol toolbar digunakan utuk
mengecek dan meng-upload sketch, membuat, membuka atau menyimpan sketch,
dan menampilkan serial monitor.
Gambar 2.2 Arduino Development Environment
13
Berikut ini adalah tombol-tombol toolbar serta fungsinya:
Vertify
Mengecek error pada kode program.
Upload
Meng-compile dan meng-upload program ke Arduino board.
New
Membuat sketch baru.
Open
Menampilkan sebuah menu dari sebuah sketch yang berada didalam sketchbook.
Save
Menyimpan sketch.
Serial monitor
Membuka serialmonitor.
Dalam lingkungan arduino digunakan sebuah konsep yang disebut
sketchbook, yaitu tempat standar untuk menumpan program (sketch). Sketch yang
ada pada sketchbook dapat dibuka dari menu File > Sketchbook atau dari tombol
open pada toolbar. Ketika pertama kali menjalankan arduino development
environment, sebuah direktori akan dibuat secara otomatis untuk tempat
penyimpana sketchbook. Pengguna dapat melihat atau mengganti lokasi dari
direktori tersebut dari menu File > Preferences. Serial monitor menampilkan
data serial yang sedang dikirim dari arduino board. Untuk mengirim data ke
board, masukkan teks dan klik tombol send atau tekan enter pada keyboard.
Sebelum meng-upload program, perlu di-setting jenis board dan port serial
yang sedang digunakan melalui menu Tools > Board dan Tools > Serial Port.
Pemilihan board berguna untuk me-ngeset parameter (contohnya: kecepatan
mikrokontroler dan baud rate) yang digunakan ketika meng-compile dan mengupload sketch. Setelah memilih board dan port serial yang tepat, tekan tombol
14
upload pada toolbar atau pilih menu File > Upload. Arduino board akan me-reset
secara otomatis dan proses upload akan dimulai. Pada kebanyakan board, LED
RX dan TX akan berkedip ketika program sedang di-upload. Arduino
development environment akan menampilkan pesan ketika proses upload telah
selesai, atau menampilkan pesan error. Ketika sedang meng-upload program,
arduino bootloader sedang digunakan, Arduino bootloader adalah sebuah
program kecil yang telah ditanamkan pada mikrokontroler yang berada pada
arduino board. Bootloader ini mengijinkan kita meng-upload program tanpa
menggunakan perangkat keras tambahan.
2.2.2 Ethernet Shield
Ethernet shield digunakan sebagai penghubung Arduino Uno ke internet. Cara
penggunaan dengan mengubungkan kabel RJ45 pada Arduino Uno dan ethernet
shield, kemudian mengikuti beberapa instruksi maka Arduino Uno dapat mengakses
internet dan Local Area Network (LAN). Keduanya biasa digunakan untuk mengirim
dan menerima informasi melalui internet. Kecepatan koneksi ethernetshield mencapai
10/100Mb dengan koneksi melalui port Serial Peripheral Interface (SPI). Ethernet
dapat menghubungkan Arduino Uno ke internet berdasarkan penggunaan Wiznet
W5100 sebagai chip pada ethernetshield. Wiznet W5100 menyediakan sebuah
jaringan yang mampu mengatur TCP dan UDP.
Ethernet shield juga memiliki tempat untuk kartu micro-SD yang dapat digunakan
untuk menyimpan data - data yang dikirim melalui internet. Selain itu juga memiliki
sebuah kontrol reset, untuk memastikan bahwa modul shield W5100 melakukan
reset dengan baik saat dinyalakan. Ethernet shield bisa juga dihubungkan dengan
perangkat elektronik lain melalui pin – pin pada bagian atas dan bawah yang sudah
tersedia papan rangkaian. Gambar 2.3 merupakan tampak depan dari ethernet shield.
15
Gambar 2.3Ethernet Shield
Adapun fitur - fitur yang dimiliki oleh modul ethernet yaitu sebagai berikut :
1.
Memiliki keluaran ripple dan noise yang rendah sekitar 100mVpp
2.
Memiliki pengaman untuk beban berlebih dan hubungan arus pendek
3.
Tegangan keluaran sebesar 9 Volt
4.
Memiliki efisiensi yang tinggi dalam mengkonversikan DC ke DC
5.
Kecepatan koneksi 10/100Mb
6.
Menggunakan antarmuka SPI untuk koneksi dengan Arduino
7.
Bekerja dengan tegangan masukan 5 Volt yang disuplai dari Arduino
Arduino berkomunikasi dengan W5100 dan kartu SD menggunakan antarmuka
SPI (Serial Peripheral Interface) yang terhubung dengan pin 10, 11, 12 dan 13 pada
masukan digital. Maka, pin – pin tersebut tidak dapat digunakan sebagai masukan
atau keluaran data. Untuk itu, karena W5100 dan kartu SD menggunakan antarmuka
SPI (Serial Peripheral Interface), maka hanya bisa menggunakan salah satunya saja.
Dengan cara mengeluarkan logika 1 pada pin 4 keluaran digital untuk mematikan
kartu SD, sedangkan untuk mematikan W5100 dengan memberikan logika 1 pada pin
10 keluaran digital. Pada saat menjalankan ethernet shield yang sudah terhubung ke
16
catu daya dan kabel ethernet RJ45, maka beberapa LED akan menyala, yang terdiri
dari :
1.
PWR : sebagai indikasi ethernet shield menyala
2.
LINK : sebagai indikasi adanya hubungan ke jaringan dan berkedip-kedip saat
ethernet menerima atau mengirim data.
3.
FULLD : sebagai indikasi bahwa sambungan ke jaringan full duplex
4.
100M : sebagai indikasi adanya sambungan ke jaringan 100Mb/s
5.
RX : berkedip ketika ethernet sedang menerima data (Receive)
6.
TX : berkedip ketika ethernet sedang mengirim data (Transmit)
7.
COLL : berkedip ketika adanya jaringan yang tabrakan
2.2.3 HC-SR04
HC-SR04 adalah modul pengukur jarak dengan gelombang ultrasonik.
Ukurannya cukup kecil yaitu 43mm x 20 mm. Jarak pengukurannya antara 2-500 cm
dengan sudut pengukuran 15º. Sinyal keluaran dari HC-SR04 berupa pulsa yang
mempresentasikan jarak. Lebar pulsa bervariasi dari 150 uS sampai 25 mS. Berikut
ini adalah Gambar 2.4 menunjukan bentuk fisik dari sensor HC-SR04.
Gambar 2.4 HC-SR04
Pada dasarnya HC-SR04 terdiri dari chip pembangkit sinyal 40 KHz, sebuah
speaker ultrasonik dan mikrofon ultrasonik. Speaker ultrasonik mengubah sinyal 40
17
KHz menjadi suara, sementra mikrofon ultrasonik berfungsi sebagai penerima
pantulan suara. HC-SR04 terdapat 4 buah pin yaitu VCC untuk catu daya HC-SR04,
Trigger sebagai input, Echo sebagai output sinyal,dan ground. Pin trigger dan echo
dan dapat langsung dihubungkan dengan mikrokontroler.
HC-SR04 bekerja dengan cara memancarkan sinyal ultrasonik kemudian
menangkap pantulannya. Ketika ada masukan ke pin trigger dari mikrokontroler yaitu
pulsa High selama 10 uS, speaker ultrasonic memancar 8 sinyal kotak dengan
frekuensi 40 KHz. Sinyal ini akan merambat dengan dengan kecepatan 344 m/s (atau
29 uS setiap 1cm). Kemudian selama menunggu pantulan HC-SR04 akan
menghasilkan pulsa High, pulsa ini akan berhenti ketika HC-SR04 menerima
pantulan sinyal yang dikeluarkan dari speaker melalui mikrofon. Maka lebar pulsa
dapat mempresentasikan jarak antara HC-SR04 dengan objek. Selanjutnya
mikrokontroler mengukur lebar pulsa tersebut dan mengkonversinya dalam bentuk
jarak. Bentuk sinyal yang dikirim dan diterima oleh HC-SR04 ditunjukan pada
Gambar 2.5.
Gambar 2.5 Bentuk Sinyal Pembacaan HC-SR04
Terdapat hal yang perlu diperhatikan dalam penggunaan HC-SR04 yang tidak dapat
mengukur objek yang dapat menyerap gelombang suara seperti busa atau sound
damper lainnya. Hasil pengukuran akan tidak tepat (kacau) jika permukaan objek
bergerigi dengan sudut tajam atau tidak rata.
18
2.2.4 XAMPP
XAMPP adalah perangkat lunak bebas yang mendukung banyak sistem operasi
merupakan komplikasi dari beberapa program. Fungsinya adalah sebagai server yang
berdiri sendiri (localhost) yang terdiri atas program Apache HTTP Server, MySQL
database, dan penerjemah bahasa yang di tulis dengan bahasa pemograman PHP dan
Perl. Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun),
Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Publik
License dan bebas, merupakan web server yang mudah di gunakan yang dapat
melayani tampilan halaman web yang dinamis.
XAMPP dikembangkan dari sebuah tim proyek bernama Apache Friends, yang
terdiri dari Tim inti (Core Team). Tim Pengembang (Development Team) dan Tim
Dukungan (Support Team).
XAMPP adalah singkatan dari masing-masing hurufnya adalah :
X: Program ini dapat dijalankan dibanyak sistem operasi, seperti Windows,
Linux, Mac OS, dan Solaris.
A: Apache, merupakan aplikasi web server. Tugas utama Apache adalah
menghasilkan halaman web yang benar kepada user bedasarkan kode PHP yang
di tulis oleh pembuat halaman web. Jika diperlukan juga berdasarkan kode PHP
yang dituliskan, maka dapat saja suatu database diakses terlebih dahulu (misalnya
dalam MySQL) untuk mendukung halaman web yang dihasilkan.
M: MySQL, merupakan aplikasi database server. Perkembangannya disebut SQL
yang merupakan kepanjangan dari Stuctured Query Language. SQL merupakan
bahasa yang terstruktur yang digunakan untuk mengoah database. MySQL dapat
digunakan untuk membuat dan mengelola database beserta isinya.
P: PHP, bahasa pemograman web. Bahasa pemograman PHP merupakan bahasa
pemograman untuk membuat web yang bersifat server-side scripting. PHP
memungkinkan kita untuk membuat halaman web yang besifat dinamis. Sistem
19
managemen database Oracle, Microsoft Access, Interbase, d-base, PostgresSQL,
dan sebagainya.
P: Perl, bahasa pemograman.
Mengenal bagian penting XAMPP yang biasa digunakan pada umumnya:

htdoc adalah folder tempat meletakan berkas-berkas yang akan dijalankan,
seperti berkas PHP,HTML, dan skrip lain.

phpMyAdmin merupakan bagian untuk mengelola basis data MySQL
yang ada dikomputer, Untuk membukanya buka browser lalu ketikan
alamat
http://localhost/phpMyAdmin,
maka
akan
mucul
halaman
phpMyAdmin.

Control Panel yang berfungsi untuk mengelola layanan (service) XAMPP,
seperti menghentikan (stop) layanan, ataupun memulai (start).
2.2.5 Bootstrap
Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman
website yang dapat mempercepat pekerjaan seorang pengembang website ataupun
pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat
bantuini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman
website sesuai dengan kebutuhan.
Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat
layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam
sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML
yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang
dibangun menggunakan JavaScript.
20
2.2.5.1 Implementasi Bootstrap
Fitur dan komponen yang terdapat pada bootstrap :
1) Source Bootsrap
Untuk memanfaatkan bootstrap ini adalah dengan men-download file-file
bootstrap di http://getbootstrap.com dimana setelah men-download file zip, yang
bernama bootstrap.zip, di-extract akan menjadi sebuah folder bootstrap, seperti pada
gambar 2.6.
Gambar 2.6 Bootstrap.zip
2) Struktur Bootstrap
Struktur Bootstrap tersebut dapat digambarkan sebagai berikut:
Gambar 2.7 Struktur Bootstrap
21
3) Daftar Komponen Bootstrap
Berikut adalah komponen yang didukung oleh Bootsrap:

Navbar

Dropdown

Button groups

Button dropdowns

Navigation tabs, pills, and lists

Label

Badges

Page headers and hero unit

Thumbails

Typehead

Progress bars
4) Penggunaan Bootsrap
Untuk penggunaan layout website menggunakan bootstrap sama dengan
menggunakan HTML dan CSS biasa. Pada dokumen HTML, kita hanya perlu
menambahkan pada bagian <head> </head> dan pada bagian <body></body>
beberapa seperti elemen berikut:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jq
22
uery.min.js"></script>
<script src=”js/bootstrap.min.js”></script>
</body
Elemen-elemen diatas digunakan untuk merelasikan dokumen HTML kita dengan file
bootstrap yang telah ada.
2.2.6 HTML
HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah
halaman web, menampilkan berbagai macam informasi di dalam sebuah penjelajah
web internet dan pemformatan hiperteks sederhana yang ditulis dalam format ACSII
agar dapat menghasilkan tampilan wujud yang terintegrasi. Dengan kata lain, berkas
yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ACSII
normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula
dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan
percetakan yang disebut dengan SGML (Standard Generalized Markup Language),
HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan
halaman web.
2.2.6.1Kegunaan
HTML mempunyai beberapa kegunaan,yaitu :

Mengintegrasikan dengan tulisan

Membuat pranala

Mengintegrasikan berkas suara dan rekaman gambar hidup

Membuat form interaktif
HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam
dokumen ini sebuah tulisan bias memuat interuksi yang ditandai dengan kode atau
lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan
ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka tulisanya dilakukan
dengan cara <b> TAMPIL TEBAL</b> tanda <b> dugunakan untuk mengaktifkan
23
intruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan
tanda </b> untuk menonaktifkan cetak tebal tersebut.
HTML lebih menekankan pada penggambaran kompoen-komponen struktur dan
format di dalam halaman web dari pada menentukan penampilannya. Sedangkan
penjelajah web digunakan untuk mengintegrasikan susunan halaman kegaya built-in
penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text
yang dikehendaki ke komputer yang menampilkan halaman web.
Salah satu hal penting tentang eksistensi HTML adalah tersedianya Lingua franca
(bahasa komunikasi) antar komputer dengan kemampuan berbeda. Pengguna
Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang
terlihat dalam pc berbaris Windows. Pengguna Microsoft Windows pun tidak dapat
melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang
menggunakan produk-produk Sub Microsystem. Namun demikian penggunapengguna tersebut dapat melihat semua halaman web yang telah di format dan berisi
Grafika dan Pranala.
2.2.6.2 Menyunting format tulisan
HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas
yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan
dalam menentukan format berkas adalah:

Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat
digunakan untuk judul, heading dan sebagainya.

Menampilkan tulisan dalam bentuk cetakan tebal.

Menampilkan sekelompok kata dalam bentuk miring.

Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan
mesin ketik.

Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.
24
2.2.6.3 Markah/Tanda
Secara garis besar, terdapat 4 jenis elemen dari HTML:

Struktual. Tanda yang menentukan level atau tingkatan dari sebuah tulisan
(contoh, <h1> Golf </h1> akan memerintahkan peramban untuk menampilkan
“Golf” sebagai tulisan tebal besar yang menunjukan sebagai Heading 1.

Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak
eduli dengan level tulisan tersebut (contoh, <b> boldface </b> akan
menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh
CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan.

Hyperteks. Tanda yang menunjukan pranala kebagian dari dokumen tersebut
atau pranala kedokumen lain (contoh, <a href=www.wikipedia.org/>
Wikipedia </a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke
URL tertentu).

Elemen widget yang membuat objek-objek lain seperti tombol (<button>),
list(<li>), dan garis horizontal (<hr>). Konsep hypertext pada HTML
memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk
menuju kebagian manapun dalam World Wide Web.
Ada tiga macam pranala (link) yang dapat digunakan:

Pranala menuju bagian lain dari page.

Pranala menuju page lain dalam satu website.

Pranala menuju resource atau website yang berbeda.
Selain markup presentasional, markup yang tidak menentukan bagaimana tampila
dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan
tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan
Cascading Style Sheets (CSS).
25
2.2.7 PHP
Hypertext preprocessor adalah bahasa pemograman berbasiskan kode-kode
(script) yang digunakan untuk mengolah suatu data yang mengirimkannya kembali ke
HTML. Kode PHP mempunyai ciri-ciri khusus, yaitu:
a. Hanya dapat dijalankan menggunakan web server, missal: Apache
b. Kode PHP diletakan dan dijalankan di web server.
c. Kode PHP dapat digunakan untuk mengakses database, seperti: MySQL,
PostgreSQL, Oracle, dan lain-lain.
d. Merupakan software yang bersifat open source.
e. Gratis untuk di download dan digunakan.
f. Memiliki sifat multiplatform, artinya dapat dijalankan menggunakan sistem
operasi apapun, seperti: Linux, Unix, Windows, dan lain-lain.
Dengan menngunakan PHP selain memberikan keuntungan seperti pada beberapa
poin diatas, juga didukung oleh banyak komumitas. Hal ini yang membuat PHP terus
berkembang.
2.2.7.1 Kelebihan PHP Dari Bahasa Pemograman Lain
Beberapa kelebihan PHP dari bahasa pemograman web, antara lain:
1. Bahasa pemograman PHP adalah sebuah bahasa script yang tidak melakukan
sebuah kompilasi dalam penggunaannya.
2. Web Server yang mendukung PHP dapat ditemukan dimana-mana dari mulai
apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relative mudah.
3. Dalam sisi pengembangan lebih mudah, karena banyak milis-milis dan
developer yang siap membantu dalam pengembangan.
4. Dalam sisi pemahaman, PHP adalah bahasa scripting yang paling mudah
karena memiliki referensi banyak.
26
5. PHP adalah bahasa open source yang dapat digunakan di berbagai mesin
(Linux, Unix, Machintos, Windows) dan dapat dijalankan secara runtime
melalui console serta juga dapat menjalankan perintah-perintah system.
2.2.7.2 Tipe Data PHP
Dalam penggunaannya PHP memiliki tipe data yaitu untuk mendefinisikan
variabel, penulisan pendefinisian variabel diantaranya digunakan tanda($). Biasanya
tipe variabel pada php tidak ditentukan oleh programmer, namun ditentukan
berdasarkan untuk apa variabel itu digunakan saat program dijalankan, artinya ketika
mendefinsikan sebuah variabel, programmer tidak perlu menuliskan tipe datanya.
8 tipe data yang dimiliki PHP, yaitu:
1. Boolean
2. Interger
3. Float / Double
4. String
5. Array
6. Object
7. Resource
8. NULL
2.2.8 Cascading Style Sheet (CSS)
Merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah
web sehingga akan lebih terstruktur dan seragam. CSS bukan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft World yang
dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footers, images,
dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).
Pada umumnya CSS diakai untuk memformat tampilan halaman web yang dibuat
dengan bahasa HTML dan XHTML.
27
CSS dapat mengendalikan ukutan gambar, warna bagian tubuh pada teks,
warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi
antar paragraf, spasi antar teks, margin kiri, margin kanan, atas, bawah, dan parameter
lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan
dokumen. Dengan adanya CSS memungkinkan pengguna untuk menampilkan
halaman yang sama dengan format yang berbeda.
2.2.9 Java Script
JavaScript adalah program dalam bentuk script, yang dijalankan oleh
interprener yang telah di tanamkan ke dalam browser web, sehingga browser web
dapat langsung mengeksekusi program Javacript dan dapat digunakan untuk
membuat web lebih dinamis dan interaktif. Javascript terintegrasi langsung dengan
HTML.
2.2.10 JSON
JSON (dilafalkan “Jason”), singkatan dari JavaScript Object Notation
(bahasa Indonesia: notasi objek JavaScript), adalah suatu format ringkas pertukaran
data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk
mempresentasikan struktur data sederhana dan larik asosiatif (disebut objek). Format
JSON sering digunakan untuk mentransmisikan data tersetuktur melalui suatu
koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah
pada pemograman aplikasi web AJAX dengan berperan sebagai alternative terhadap
penggunaan tradisional format XML.
2.2.11 Highcharts
Highchartrs adalah charting library berbasis javascript yang di buat oleh
perusahaan Highsoft Solution AS. Highchart ini ada yang berbayar ada juga yang
free. Dan juga untuk membuat grafik dalam sebuah situs web. Dengan highchart kita
bisa membuat beberapa bentuk grafik seperti line chart, bar coloum atau area chart.
28
2.2.12 Adobe Dreamweaver
Adalah aplikasi desain dan pengembang web yang menyediakan editor
WYSIWYG visual (bahasa sehari-hari yang disebut sebagai desain view) dan kode
editor dengan fitur standar seperti syntax highlighting, code code completion, dan
code collapsing sera fitur lebih canggih seperti real-time syntax checking dan code
intropectionuntuk menghasilkan petunjuk kode untuk membantu pengguna untuk
menulis kode. Tata letak tampilan Design mempasilitasi desain cepat dan pembuatan
kode seperti memungkinkan pengguna dengan cepat membuat tata letak dan
memanipulasi elemen HTML.Dreamweaver memiliki fitur browser yang terintegrasi
untuk melihat halaman web yang digunakan di jendela pratinjau program sendiri agar
konten memungkinkan untuk terbuka di web browser yang telah terinstal. Aplikasi ini
menyediakan transfer dan fitur sinkronasi, kemampuan untuk mencari dan mengganti
baris teks atau kode untuk mencari kata atau kalimat biasa di seluruh situs, dan
templatingfeature yang memungkinkan untuk berbagi suatu sumber kode atau
memperbaharui tata letak di seluruh situs, dan templeating feature yang
memungkinkan untuk berbagi satu sumber kode atau memperbaharui tata letak di
seluruh situs tanpa server side includes atau scripting. Behavior Panel juga
memungkinkan penggunaan JavaScript dasar tanpa pengetahuaan coding, dan
integrasi dengan Adobe Spry Ajax framework menawarkan akses mudah ke konten
yang dibuat secara dinamis dan interface.
2.2.1.3 Pengukuran Level Cairan
Alat-alat Instrument yang digunakan untuk mengukur dan menunjukan tinggi
permukaan cairan dikenal dengan istilah Level. Pengukuran level adalah yang
berkaitan dengan peralatan proses yang berbentuk kolom seperti, Tangki, Drum,
Tabung Silinder dan juga berupa kotak atu kubus. Tinggi level dapat dilihat langsung
dan diduga kedalamannya tanpa harus mengalami proses pengubahan bentuk bacaan
dari hasil pengukuran, ini dikarenakan oleh mekanisme yang secara langsung dapat
29
diamati. Dengan diketahuinya tinggi level maka volume dari cairan yang diukur dapat
diketahui bila. Pengukuran level secara visual atau secara langsung dapat dilihat
dengan bantuan alat ukur. Berikut di bawah ini beberapa contoh pengukuran :
Gambar 2.8 Pengukuran Level Cairan
1) Pelampung (Floating device).
Pelampung merupakan alat yang sedehana yang dapat digunakan dalam
pengukuran level. Pengukuran ini didasarkan pada suatu benda (pelampung)
yang mampu mengapung pada fluida tertentu.
2) Displacer.
Displacer merupakan alat ukur level yang diletakkan di sekitar tempat fluida
yang akan diukur dan juga dihubungkan dengan fluida yang bersangkutan.
Dengan menggunakan kaidah bejana berhubungan, maka level fluida dapat
diketahui berdasarkan batas fluida yang terdapat pada displacer yang telah
diberikan suatu skala satuan tertentu.
3) Gelombang Ultrasonic
Metode pengukuran level dengan menggunakan gelombang ultrasonic atau
gelombang suara lainnya memiliki prinsip kerja yang sama. Suatu sumber
gelombang ultrasonic diletakkan pada bagian atas suatu tangki. Gelombang
ultasonic ini akan merambat dan terpantul kembali ketika mengenai batas dua
fluida yang berbeda.