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

Gambar 1.4.1 Metodologi Perancangan

Studi LiteraturIntegrasi mysqql

database Pembuatan HMI

di Web

BAB II

TINJAUAN PUSTAKA

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

cloud.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.eng-cloud.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