TEKNIK FISIKA ITB

TUGAS BESAR SCADA

Virtual Private Network - VPN
Trisfianto Prasetio
13311068

1.1 Latar Belakang

Kemajuan teknologi selalu berkembang selaras dengan berjalannya waktu. Dan salah
satu hasil dari kemajuan teknologi ini adalah munculnya jaringan internet. Jaringan
internet sudah menjadi kebutuhan yang primer oleh masyarakat pada umumnya.
Jaringan internet ini sendiri tentu tidak akan bisa lepas dengan web server. Penjelasan
singkat mengenai web server adalah sebuah layanan internet yang telah disediakan
oleh komputer untuk mengakses segala jenis file yang terdapat pada halaman web
melalui HTTP/HTTPS dengan menggunakan aplikasi atau program tertentu (dikenal
dengan nama web browser) dan mengirimkan kembali hasil permintaannya dalam
bentuk halaman halaman web yang berbentuk dokumen HTML
Web server adalah software yang menjadi tulang belakang dari world wide web
(www). Web server menunggu permintaan dari client yang menggunakan browser
seperti Netscape Navigator, Internet Explorer, Modzilla, dan program browser
lainnya. Jika ada permintaan dari browser, maka web server akan memproses
permintaan itu kemudian memberikan hasil prosesnya berupa data yang diinginkan
kembali ke browser. Data ini kemudian akan ditampilkan oleh browser sesuai dengan
kemampuan browser tersebut. Contohnya, bila data yang dikirim berupa gambar,
browser yang hanya mampu menampilkan teks (misalnya lynx) tidak akan mampu
menampilkan gambar tersebut, dan jika ada akan menampilkan alternatifnya saja.
Fungsi utama sebuah server web adalah untuk mentransfer berkas atas permintaan
pengguna melalui protokol komunikasi yang telah ditentukan. Disebabkan sebuah
halaman web dapat terdiri atas berkas teks, gambar, video, dan lainnya pemanfaatan
server web berfungsi pula untuk mentransfer seluruh aspek pemberkasan dalam
sebuah halaman web yang terkait; termasuk di dalamnya teks, gambar, video, atau
lainnya.
Webserver atau server adalah komputer yang dikhususkan untuk menaruh data
website, hanya saja dalam hal ini server harus 24 jam online, jika tidak maka data tak
bisa diakses oleh pengunjung website. Semua komputer logikanya bisa dijadikan
server, namun server yang khusus untuk website punya spesifikasi khusus. Hal ini
untuk menjaga agar kecepatan server stabil dan memenuhi kriteria yang dihadapkan.
Selain bergantung paga spesifikasi hardware dan software, kecepatan webserver juga
bergantung pada akses internet di tempat server berada atau juga tergantung pada

kecepatan Internet Service Provider (ISP) yang digunakan untuk online, dan terlebih
lagi juga bergantung pada jalur lokasi negara yang bersangkutan.
Namun pada kebanyakan software gratis mereka tidak menyertakan hal tersebut.
Untuk software yang bebas biaya yang mempunyai dukungan teknis dari pembuatnya
dan dengan dokuentasi yang lengkap, adalah web server Apache. Oleh karena itulah,
pada pengerjaan tugas besar ini saya menggunakan web server Apache.

1.3 Rumusan Masalah

Adapun rumusan masalah dari pengerjaan tugas ini adalah:
Hardware yang digunakan adalah hardware yang sudah ada. Dalam hal ini hardware
yang diambil untuk penentuan kadar polusi udara dalah sensor polusi yang terdapat di
laboratorium Advanced Functional Material.
Data yang diambil adalah data yang sudah ada yang telah ditransfer ke dalam web
server apache yang terdapat dalam eng-cloud.
Pengambilan data dari data sensor yang sudah ditransfer adalah berupa database
mysql pada eng-cloud dan berupa data kadar polusi PM, NO2, SO2, CO, dan O3
Pembuatan HMI dengan menggunakan bahasa pemrograman HTML dan PHP

1.2 Target Pencapaian

Target pencapaian ini dilakukan secara bertahap pada 4 kali presentasi. Adapun
beberapa target pencapaian pada tugas makalah ini, yaitu:
1. Mengetahui seluk beluk konsep penggunaan web server
2. Melakukan perancangan web server dengan mengambil data dari alat
3. Pengambilan data dan penyimpanan data ke web server, dan pembuatan HMI
4. Penyempurnaan tampilan HMI pada web

1.4 Metodologi
Metodologi yang digunakan pada tugas besar ini adalah eksperimental. Alur pekerjaan
tugas besar yang akan dilakukan adalah sebagai berikut:

1. Studi literatur mengenai web server, eng-cloud server, mysql database, bahasa
pemrograman html dan php
2. Integrasi mysql database yang sudah ada dengan HMI yang akan dibuat dengan
menggunakan bahasa pemrograman html dan php
3. Pembuatan HMI pada web dengan menggunakan bahasa pemrograman html dan
php agar user friendly
Studi Literatur

Integrasi mysqql
database

Gambar 1.4.1 Metodologi Perancangan

BAB II
TINJAUAN PUSTAKA

Pembuatan
HMI di Web

2.1 Web Server

Web server adalah software yang menjadi tulang belakang dari world wide web
(www). Web server menunggu permintaan dari client yang menggunakan browser
seperti Netscape Navigator, Internet Explorer, Modzilla, dan program browser
lainnya. Jika ada permintaan dari browser, maka web server akan memproses
permintaan itu kemudian memberikan hasil prosesnya berupa data yang diinginkan
kembali ke browser. Data ini mempunyai format yang standar, disebut dengan format
SGML (standar general markup language). Data yang berupa format ini kemudian
akan ditampilkan oleh browser sesuai dengan kemampuan browser tersebut.
Contohnya, bila data yang dikirim berupa gambar, browser yang hanya mampu
menampilkan teks(misalnya lynx) tidak akan mampu menampilkan gambar tersebut,
dan jika ada akanmenampilkan alternatifnya saja.
Web server, untuk berkomunikasi dengan client-nya (web browser) mempunyai
protokol sendiri, yaitu HTTP (hypertext tarnsfer protocol). Dengan protokol ini,
komunikasi antar web server dengan client-nya dapat saling dimengerti dan lebih
mudah. Seperti telah dijelaskan diatas, format data pada world wide web adalah
SGML. Tapi para pengguna internet saat ini lebih banyak menggunakan format
HTML (hypertext markup language) karena penggunaannya lebih sederhana dan
mudah dipelajari. Kata HyperText mempunyai arti bahwa seorang pengguna internet
dengan web browsernya dapat membuka dan membaca dokumen-dokumen yang ada
dalam komputernya atau bahkan jauh tempatnya sekalipun. Hal ini memberikan cita
rasa darisuatu proses yang tridimensional, artinya pengguna internet dapat membaca
dari satu dokumen ke dokumen yang lain hanya dengan mengklik beberapa bagian
dari halaman halaman dokumen (web) itu.
Proses yang dimulai dari permintaan webclient (browser), diterima web server,
diproses, dan dikembalikan hasil prosesnya oleh web server ke web client lagi
dilakukan secara transparan. Setiap orang dapat dengan mudah mengetahui apa yang
terjadi pada tiap-tiap proses. Secara garis besarnya web server hanya memproses
semua masukan yang diperolehnya dari web clientnya.

Untuk membuat sebuah web server, maka kita akan menemukan berbagai macam
persoalan, dimulai dari pemilihan software web browser yang manayang paling sesuai
kebutuhan, apa spesifikasi hardware yang dibutuhkan, bagaimana

kondisi

interkoneksi jaringan internet yang ada, dan lain sebagainya. Belum lagi termasuk
bagian pembuatan halaman-halaman webnya, mau menggunakan format apa (HTML,
SGML, PHP, PHP3, CGI, dan lain-lain). Hal yang paling utama dalam proses
pembuatan Web Server adalah memilih software mana yang akan digunakan sebagai
web server kita
2.2 Cloud Computing
Cloud computing merupakan evolusi yang mengadopsi virtualization, service-oriented
architecture and utility computing. Cloud computing memungkinkan konsumen
teknologi untuk memikirkan komputasi secara efektif dengan biaya minimal dan
dapat diandalkan. Hal lain yang juga tidak perlu lagi dikhawatirkan oleh pengguna
adalah tentang bagaimana membangunnya, cara kerjanya, siapa yang mengoperasikan
atau di mana harus meletakkan.
Virtualization adalah penciptaan versi virtual (bukan aktual) terhadap sumber daya
teknologi informasi, seperti sistem operasi, server, perangkat penyimpanan (storage)
atau sumber daya jaringan. Virtualisasi dapat dilihat sebagai bagian dari tren secara
menyeluruh dari Enterprise TI yang mencakup autonomic computing. Autonomic
computing merupakan sebuah skenario di mana lingkungan TI akan mampu
melakukan pengelolan sendiri (self management) didasarkan pada aktivitas yang
dirasakan dan utility computing. Kekuatan pemrosesan komputer dianggap sebagai
sebuah utilitas yang memungkinkan klien membayar sesuai yang diperlukan.
Ada beberapa pemahaman tentang Cloud Computing yang dapat membantu kita untuk
mengenal apa itu Cloud Computing :
Internet bisa dianggap cloud besar. Cloud berisi komputer yang semuanya
saling tersambung. Dari situlah berasal istilah 'cloud'. Jadi semuanya

disambungkan ke 'cloud', atau cloud itu. (Stevan Greve)

Cloud Computing adalah gabungan pemanfaatan teknologi komputer
('komputasi') dan pengembangan berbasis Internet ('cloud'). Cloud (cloud)
adalah metefora dari internet, sebagaimana cloud yang sering digambarkan di
diagram jaringan komputer, cloud (cloud) dalam Cloud Computing juga
merupakan abstraksi dari infrastruktur kompleks yang disembunyikannya.

Dalam perspektif teknologi komunikasi sendiri, cloud computing atau

komputasi cloud dapat diartikan sebagai suatu teknologi yang memanfaatkan
internet sebagai resource untuk komputasi yang dapat di-requset oleh
pengguna dan merupakan sebuah layanan dengan pusat server bersifat virtual
atau berada dalam cloud (internet) itu sendiri (Krishnadi, 2010).

Seorang pengguna cloud membutuhkan perangkat klien seperti laptop atau komputer
desktop, komputer pad, ponsel pintar, atau sumber daya komputasi lainnya dengan
web browser (atau rute akses lain yang disetujui) untuk mengakses sistem cloud
melalui World Wide Web. Biasanya pengguna akan login ke cloud pada penyedia
layanan atau perusahaan swasta. Cloud computing bekerja secara client-server,
menggunakan protokol web browser. cloud menyediakan server berbasis aplikasi dan
semua layanan data kepada pengguna, dengan output ditampilkan pada perangkat
klien. Jika pengguna ingin membuat dokumen menggunakan pengolah kata, misalnya,
cloud menyediakan aplikasi yang cocok yang berjalan pada server yang menampilkan
pekerjaan yang dilakukan oleh pengguna pada layar web browser klien.
Memori yang dialokasikan untuk web browser sistem klien digunakan untuk membuat
data aplikasi muncul di layar sistem klien, tetapi semua perhitungan dan perubahan
dicatat oleh server, dan hasil akhir termasuk file yang dibuat atau diubah secara
permanen disimpan pada server cloud. Kinerja dari aplikasi cloud tergantung pada
kecepatan akses jaringan, dan kehandalan serta kecepatan pemrosesan perangkat
klien.

Gambar 2.2.1 Komputasi Cloud

2.3 Bahasa Pemrograman PHP

PHP merupakan script yang menyatu dengan HTML dan berada pada server (server
side HTML embedded scripting). Dengan PHP ini Anda dapat membuat beragam
aplikasi berbasis web, mulai dari halaman web yang sederhana sampai aplikasi
komplek yang membutuhkan koneksi ke database. PHP (Hypertext Preprocessor),
merupakan bahasa pemrograman web bersifat serverside, artinya bahasa berbentuk
script yang disimpan dan dijalankan di komputer server (WebServer) sedang hasilnya
yang dikirimkan ke komputer client (WebBrowser) dalam bentuk script HTML
(Hypertext Mark Up Language).
Konsep kerja PHP diawali dengan satu permintaan suatu halaman web oleh browser.
Berdasarkan URL (Uniform Resource Locator) atau dikenal dengan alamat Internet,
browser mendapat alamat dari webserver, mengidentifikasikan alamat yang
dikehendaki, dan menyampaikan segala informasi yang dibutuhkan oleh Web Server.
Selanjutnya Web Server akan mengirimkan isinya ke mesin php dan mesin inilah
yang memproses dan memberikan hasilnya (berupa kode html) ke web server,
selanjutnya web server menyampaikan ke client

Gambar 2.3.1 Konsep Kerja PHP

Salah satu kelebihan dari PHP adalah mampu berkomunikasi dengan berbagai data
base yang terkenal. Dengan demikian, menampilkan data yang bersifat dinamis, yang
diambil dari database, merupakan hal yang mudah untuk diimplementasikan.
2.4 Bahasa Pemrograman HTML
HTML adalah bahasa pemrograman dasar yang digunakan untuk membangun sebuah
situs. HTML sangat mudah digunakan dan diaplikasikan, oleh karena itu apabila
kalian ingin belajar membangun sebuah situs sendiri maka bahasa HTML wajib kalian
pelajari. Pelajaran HTML ini akan diberikan dalam bahasa yang mudah dimengerti
sehingga kalian dapat belajar mulai dari nol alias tidak tahu apa-apa tentang html.
Anggap kalian sedang ingin membuat suatu kue. Sebelum membuat suatu kue maka
kalian harus mengetahui terlebih dahulu bahan-bahan yang akan kalian gunakan
beserta tahapan-tahapannya agar kue itu nanti terasa lezat apabila dimakan. Membuat
file html pun demikian, sebelum membuat suatu file html kalian harus mengerti
struktur dari file html itu sendiri dan 'bahan-bahan' yang digunakan dalam membuat
file tersebut agar file html kalian dapat tampil dengan bagus di browser manapun.
HTML merupakan singkatan dari Hypertext Markup Language yang merupakan
bahasa paling standaryang digunakan untuk membuat suatu website. HTML bukanlah
merupakan suatu bahasa pemrograman,karena bahasa ini hanya berguna untuk
mengontrol tampilan dari suatu halaman (web page) beserta isinya, beda dengan
bahasa PHP yang didalamnya dapat mendukung suatu bentuk perulangan (Loop) atau
bentuk pengandaian (if-else) sehingga bahasa PHP dapat disebut sebagai suatu bahasa
pemrograman. Namun dengan berawal dari bahasa paling dasar ini kamu dapat
menambahkan obyek-obyek lainnya seperti gambar, suara, video, dan permainan flash
dalam suatu dokumen HTML. Untuk membuat suatu dokumen HTML, hal-hal yang
kamu perlukan hanyalah sebuah text editor biasa seperti: Notepad atau Wordpad
(program standar bawaan dari windows) lalu kamu mengetikkan kode HTML
didalamnya kemudian di save (simpan) dengan akhiran (ekstensi) .htm atau .htm.
2.6 FAQ
1. Rancangan ke depannya seperti apa? Apakah akuisisi data akan dilakukan?

Jawab: Rancangan ke depannya adalah dengan melakukan pembutan HMI, yang akan
dilakukan integrasi terhadap data yang ada pada database mysql, kemudian HMI
tersebut disimpan ke dalam sebuah web server. Akuisisi data diperlukan antara
database dan HMI, sehingga data yang muncul pada HMI nilainya sama dengan yang
di database.
2. Bagaimana kalau beda komputer? Apakah bisa daikses?
Jawab: Kalau beda komputer tentunya masih bisa diakses, karena HMI dibuat dan
dilempar pada sebuah web server sehingga di komputer mana pun bisa diakses.
3. Kalau akses dilakukan pada luar jaringan apakah bisa? Mengakses database dari
luar LAN bisa tidak?
Jawab: Bisa, karena disimpan pada sebuah server sehingga bisa diakses dimanapun
kapanpun dan dengan apapun asal ada koneksi internet.
4. Apakah web server seperti opc server yang bisa diakses di dalam local area?
Jawab: bisa untuk local area, bisa juga untuk area yang sangat luas.
5. Misal kita sudah punya data, butuh software untuk simpan data, data ditarik
bagaimana?
Jawab: Penyimpanan bisa dilakukan dengan menggunakan software kepserver, atau
dengan mysql database

BAB III
PERANCANGAN SISTEM
3.1 Pemilihan Database

Database yang digunakan pada pengerjaan tugas besar ini adalah MySQL. MySQL
merupakan database yang berisfat open source serta menggunakan bahasa query yang
terstruktur. MySQL merupakan turunan salah satu konsep utama dalam basis data
yang sebelum sudah ada, yaitu SQL (Structured Query Language). MySQL dapat
memproses berbagai macam tipe data, seperti integer, float, double, dan lain-lain.
MySQL memiliki antar muka (interface) terhadap

berbagai aplikasi dan bahasa

pemrograman dengan fungsi API.

Database yang akan diambil dan ditarik datanya berasal dari mysql database yang
disimpan di eng-cloud.com/phpmyadmin. Untuk dapat masuk ke dalam database
polusi, maka masukkan user yaitu c0news dan password news2x5=10. Sehingga akan
muncul tampilan seperti berikut:

Gambar 3.1.1 Tampilan PhpMyAdmin

Pada PhpMyAdmin yang telah dibuka terdapat empat buah database, database
c0news, database c0polusi, database information_schema, dan database test. Dalam
masing-masing database, terdapat tabel-tabel di dalamnya. Dalam pengerjaan tugas
besar kali ini, tabel yang digunakan adalah tabel pengukuran yang terdapat dalam
c0polusi database.

Gambar 3.1.2 Pemilihan Tabel

Pada database tabel pengukuran berisi 6 kolom, yaitu timestamp, polusiid, CO2, CH4,
H2S, dan NO2.

Gambar 3.1.3 Database Tabel Pengukuran

3.2 Pengkoneksian Database Mysql ke HMI dengan Menggunakan Bahasa PHP

Pembuatan script dengan menggunakan bahasa php untuk mengkoneksikan database
ke dalam halaman HMI yang akan kita buat dilakukan dengan menggunakan notepad
++.
Untuk memulai kode bahasa php maka, diawali dengan script <?php kemudian untul
menutup kode bahasa php ditutup dengan menggunakan ?>
Untuk melakukan koneksi, maka dibuatlah script yaitu
$connect=mysql_connect(server, username, password);//database kita berada
pada server localhost, dan username password yang dimasukkan sesuai dengan
username dan password server database.
Untuk memilih database mana yang akan diambil, maka scriptnya adalah
mysql_select_db(database,$connect);//dalam hal ini database yang ingin kita
koneksikan adalah c0polusi.
Untuk memilih data mana yang akan diambil, untuk tugas besar ini saya mencoba
untuk menampilkan semua data terlebih dahulu, dengan script sebagai berikut:
$sql=SELECT * FROM pengukuran;//pengukuran disini adalah nama tabel yang
akan ditarik datanya, untuk *berarti pengambilan semua data pada tabel pengukuran
Untuk pendefinisian query, maka digunakan lah script sebagai berikut:
$query=mysql_query($sql);
Script secara keseluruhan dituliskan dalam notepad seperti pada gambar di bawah ini:

Gambar 3.2.1 Script pada Notepad untuk Koneksi Database

3.3 Pembuatan tabel dengan Menggunakan Bahasa HTML

Pembuatan script untuk pembuatan tabel dilakukan dengan menggunakan bahasa html
untuk dimunculkan ke dalam halaman HMI yang akan kita buat dilakukan dengan
menggunakan notepad ++.
Untuk memulai mengawali kode bahasa html, diawali dengan script <html> dan
untuk menutup bahasa htm maka ditutup dengan script </html>.Untuk membuat
heading di tab bar pada browser, dilakukan dengan menggunakan script
<head><title>judul headbar</title></head>
Untuk menuliskan sesuatu di halaman web maka dibuat script dengan <body>isi
halaman web</body>. Jika ingin melakukan perubahan font pada tulisan cukup
dilakukan dengan penambahan script font <font></font>.
Untuk

pembuatan

tabel,

cukup

dilakukan

dengan

penambahan

<table>isi

table</table>. Untuk penambahan kolom dapat dilakukan dengan menambhkan

<td>namakolom</td>. Untuk pengerjaan tugas besar ini ditambahkan enam kolom
yaitu polusiid, PM, SO2, CO, O3, NO. Untuk script secara keseluruhan adalah
sebagai berikut:

Gambar 3.3.1 Script Pembuatan HMI dengan Menggunakan HTML

Namun, karena belum dilakukan pendefinisian isi tabel berdasarkan
database tabel pengukuran, maka yang akan muncul hanyalah tampilan
berikut:

Gambar 3.3.2 Hasil Tampilan Script HTML pada Web Browser

3.4 Integrasi Data dari Database pada Tabel yang Telah Dibuat pada HMI
Pada halaman web, yang muncul hanyalah kolom tabelnya saja, sedangkan data yang
berasal dari database tabel pengukuran belum muncul, untuk melakukan pemunculan
isi tabel sesuai dengan data yang ada pada database tabel pengukuran maka
diperlukan penggunaan bahasa php kembali untuk mengintegrasikan data pada
database ke tabel yang telah dibuat pada HMI.
Untuk mengintegrasikan data pada tabel yang sudah dibuat, maka dibuat script yaitu
<?php while($row=mysql_fetch_array($query). Fungsi while disini dimaksudkan agar
ketika ada data pada setiap baris di kolom-kolom yang terdapat di database tabel
pengkuran dimunculkan nilainya, database yang akan dimunculkan terlebih dahulu
sudah didefinisikan dengan variabel query (variabel yang didefinisikan untuk
mengambil semua data pada tabel pengukuran)
Agar nilai yang dipanggil sesuai dengan kolom yang dibuat dalam tabel, maka
dibuatlah script pemanggilan dengan <td><?php echo $row[namakolom]; ?></td>.
Fungsi echo disini adalah untuk memanggil baris pada kolom mana pada database.
Untuk script keseluruhan adalah sebagai berikut:

Gambar 3.4.1 Script Integrasi Data pada Tabel

3.5 Penyimpanan Script pada Web Server
1. Pengkoneksian pada toolbar plugin->NppFTP->showNppFTP. Pada pengerjaan
tugas ini, kita akan sambungkan pada NFTP rinoco, setelah memasukkan username
dan password, sehingga muncul jendela berikut pada notepad++

Gambar 3.5.1 Pemgkoneksian terhadap NFTP

2. Untuk penyimpanan file dilakukan di / -> var -> www -> eng-cloud.com -> web ->
polusiisma. Dan file ini disimpan dan diupload dengan nama ismapolusiaja.php. Klik
tombol upload pada folder destinasi yang akan dituju. Bisa juga dilakukan pembuatan
folder baru dengan klik kanan add folder.

Gambar 3.5.2 Penyimpanan dan Penguploadan File

3. Maka file yang disimpan akan tersimpan pada halaman http://www.engcloud.com/polusiisma/ismapolusiaja.php, yang bisa diakses dimanapun dan dengan
koneksi apapun. Sehingga tampilan yang muncul pada halaman web adalah sebagai
berikut:

Gambar 3.5.3 Tampilan pada Halaman Web

3.6 FAQ

1. Apakah data yang ditampilkan dalam web application ini realtime? bila tidak, apa
bisa buat realtime?
Jawab: Datanya real time, sesuai dengan data yang ada pada database mysql yang
ingin ditarik
2. Data - data yang ditampilkan ini dari mana? soalnya data polusi yang ditampilkan
tadi tdk di update lagi?
Jawab: Data-data yang ditampilkan berasal dari database mysql c0polusi, yang mana
database ini mengambil data dari sebuah sensor di laboratorium AFM Teknik Fisika
ITB
3. Dalam web application yang dibuat kita bisa read data, bila ingin write data apakah
bisa?
Jawab: Bisa saja, tergantung scriptnya, dan mungkin pada script cukup kompleks
bahasa pemrogramannya
4. Apakah ada login sebagai proteksi privasi untuk masuk ke dalam database web
application?
Jawab: bisa saja jika ingin dibuat, dengan menggunakan bahasa php, jquery dan ajax,
namun rumit dalam pengerjaan.
5. Bagaimana jika kita ingin menampilkan aplikasi lain, semisal grafik data historiaan
dalam web application?
Jawab: bisa saja, dibuat script php ataupun jquery yang berguna untuk membuat
grafik, dan datanya berasal dari database mysql

BAB IV
PENYEMPURNAAN RANCANGAN
4.1 Pembuatan Gambar Latar pada HMI
Untuk melakukan penambahan gambar latar pada HMI dapat dilakukan dengan
menggunakan script seperti ini <body background=namafile.jpg>. Body
background ini adalah fungsi untuk menampilkan gambar latar pada halaman web.
Untuk file bisa dalam bentuk jpg, jpeg ataupun gif. Dan untuk nama file, yang perlu
diperhatikan adalah file tersebut harus disimpan dalam direktori yang sama pada
NFTP dengan script HMI, agar bisa dimunculkan pada web, seperti pada gambar
4.1.2.

Gambar 4.1.1 Script Penambahan Gambar Latar pada HMI

Gambar 4.1.2 Direktori Penyimpanan File

4.2 Pembuatan Box Judul Halaman
Untuk melakukan pembuatan box judul, sehingga lebih terlihat menarik dapat
dilakukan dengan menggunakan script seperti berikut:

Gambar 4.2.1 Penambahan Box Judul

Sehingga, pada halaman web tampilannya akan menjadi seperti berikut:

Gambar 4.1.2 Tampilan Setelah Dilakukan Penambahan

4.3 Pengaturan Tabel
Pada tugas besar ini, tabel yang akan diatur konfigurasinya adalah dengan melakukan
penambahan warna pada kolom serta pengaturan tabel agar letaknya berada di tengah
halaman web. Untuk script pengaturan tabel agar berlokasi di tengah maka dibuatlah
script <div align=center></div>. Untuk melakukan pewarnaan pada tabel dapat
dilakukan dengan penambahan script <table bgcolor=#kodewarna></table>. Untuk
penambahan warna pada header kolom dapat dilakukan per masing-masing header
kolom, dengan penambahan script <th bgcolor=#kodewarna></th>. Untuk script
secara keseluruhan adalah seperti gambar di bawah ini:

Gambar 4.1.2 Script Pengaturan Tabel

Sehingga tampilannya akan menjadi seperti ini,

Gambar 4.3.2 Tampilan Setelah Dilakukan Pengaturan Tabel

4.4 Penambahan Kolom Timestamp

Penambahan kolom timestamp dilakukan agar pengguna HMI, mengetahui waktu
kapan data diambil, sehingga script yang harus ditambahkan adalah penambahan
script kolom pada bahasa HTML, dan kolom pemanggilan dengan menggunakan
bahasa PHP. Berikut adalah script yang ditambahkan:

Gambar 4.4.1 Penambahan Script pada Bahasa HTML

Gambar 4.4.2 Penambahan Script pada Bahasa PHP

Sehingga, pada halaman web tampilannya akan menjadi seperti berikut:

Gambar 4.4.3 Tampilan Setelah Dilakukan Penambahan Kolom

4.5 Pengaturan Data agar Kemunculan dari Data yang Paling Baru
Pengaturan agar data berstruktur descending, atau semakin ke bawah data yang
muncul adalah data yang lama, maka dilakukan pengaturan di mysql database pada
phpmyadmin. Klik c0polusi->pengukuran->operations. Dilakukan pengaturan pada
kotak alter table by dengan memilih timestamp, kemudian descending. Seperti pada
gambar berikut:

Gambar 4.5.1 Pengaturan Data yang Muncul

Sehingga, pada halaman web tampilannya akan menjadi seperti berikut:

Gambar 4.5.2 Tampilan pada HMI

Baris paling atas sudah merupakan data terbaru.
4.6 Pembatasan Jumlah Data yang Ditampilkan
Dengan menggunakan script sebelumnya, data data sudah dimunculkan, namun
terlalu banyak data yang dimunculkan pada HMI yaitu keseluruhan data yang
berjumlah 600an data. Sehingga perlu diberikan pembatasan dalam jumlah data yang
akan ditampilkan sehingga lebih memudahkan pengguna dalam pembacaan. Script
yang akan digunakan adalah dengan melakukan penambahan pada pendefinisian
variable sql. Dengan script sebagai berikut. $sql=SELECT * FROM nama tabel
LIMIT 0,20;. Limit berarti pembatasan dari 0-20. Dengan script lengkap sebagai
berikut:

Gambar 4.6.1 Penambahan Script Pembatasan Jumlah Data

Sehingga, pada halaman web tampilannya akan menjadi seperti berikut:

Gambar 4.6.2 Tampilan pada HMI

BAB V
KESIMPULAN DAN SARAN
5.1 KESIMPULAN

1. Tampilan HMI, dapat diklik pada http:// www.engcloud.com/polusiisma/ismapolusiiii.php

2. Tampilan HMI sudah bisa diakses di jaringan internet manapun, dan dapat diakses
juga melalui handphone. Karena file php disimpan ke dalam cloud server. Sehingga
data bisa diakses dimanapun
3. Tampilan HMI sudah menampilkan data yang real time, dan dibatasi untuk yang
ditampilkan hanya 30 data terbaru

5.2 SARAN
1. Pembuatan password dan username, agar tidak sembarang orang yang dapat
mengakses data terserbut