Cara Membuat Website Monitoring IOT Sederhana

Cara membuat website monitoring perangkat Internet of Things tidak lah terlalu rumit apabila kita sudah memahami konsep pemrograman web. Khususnya pemrograman disisi server (server side). Bahasa yang digunakan pun juga beragam, kita bisa menggunakan bahasa pemrograman server sesuai dengan keinginan dan kebutuhan kita.

Seperti halnya bahasa pemrograman PHP, Ruby, Python, Perl, ASP, atau yang sedang booming saat ini yaitu NodeJs. Semua memiliki kelebihan dan kekurangan masing-masing. Tetapi beberapa bahasa pemrograman tersebut tidak sepenuhnya didukung oleh pihak hosting, beberapa hosting hanya mendukung bahasa pemrograman server seperti PHP, Python dan NodeJS. Apabila teman-teman ingin menggunakan bahasa pemrograman server yang lainnya, alangkah baiknya apabila menyewa server private (VPS) sendiri agar dapat di-instal bahasa pemrograman yang teman-teman sukai.

Pada kesempatan kali ini saya akan memberikan tutorial cara membuat komunikasi serhana agar perangkat IOT kita dapat terhubung dengan public server atau hosting pribadi. Karena keterbatasan saya yang hanya menggunakan hosting, saya akan memberikan tutorial menggunakan bahasa pemrograman PHP.

Oh iya, contoh monitoring yang akan kita buat ini terdapat pada artikel yang pernah saya bahas yaitu Sim800L GPRS Mode. Pada artikel tersebut terdapat monitoring sederhana yang cukup membantu untuk mengetahui sukses tidaknya data yang dikirimkan perangkat ke web server kita. Seperti pada gambar berikut :

hcix-c0d3r tester

Berikut adalah link untuk mengakses file tersebut http://ulindev.com/project/tes/ . Pada file tersebut kita dapat menngetahui informasi pengiriman data terakhir dari perangkat yang telah kita buat. Yang terpenting kita harus mengetahui Tanggal, Waktu dan pastinya Nilai yang telah dikirim dari perangkat. Nilai tersebut dapat berupa output sensor dan sebagainya.

Langsung saja kita bahas, ikuti langkah pembuatan monitoring sederhana berikut ini :

1. Perangkat Perang

Sebelum memulai semuanya, alangkah baiknya apabila kita berdo’a agar ilmu kita berkah dan menyiapkan semua yang dibutuhkan.
Berikut adalah list perangkat perang yang akan kita perlukan :

  • Text Editor 
    • Saya merekomendasikan untuk menggunakan text editor seperti notepad++, sublime dan sejenisnya. Silahkan download dihalaman resminya.
  • XAMPP 
    • XAMPP yang sudah include APACHE dan MySQL sangat membantu dalam pengembangan website local sebelum nantinya di publish ke hosting.

Setelah melakukan instalasi Text Editor dan XAMPP  silahkan aktifkan Apache dan MySQL. Saya anggap teman-teman sudah sukses megaktifkan localhost di komputer masing-masing.
Kemudian buatlah folder dengan nama tes didalam C:\xampp\htdocs (tergantung path pada komputer teman-teman).

2. Desain Database

Karena kita membuat sistem yang sederhana, jadi tidak perlu database yang terlalu rumit. Ikuti langkah berikut :

  • Membuat Database Baru
    • Buatlah database baru dengan nama db_test .
  • Import File SQL
    • Import file SQL yang telah saya buat, silahkan download disini.

Pada file tersebut terdapat tb_test yang berisikan kolom id, tanggal, waktu dan nilai. Seperti pada gambar dibawah ini.

Struktur tb_test

3. Pemrograman PHP

Setelah database selesai dibuat, selanjutnya buka text editor dan ikuti langkah-langkah berikut.

  • Membuat File Koneksi Akses Database

Buatlah file koneksi dengan nama koneksi.php dan masukkan kodenya seperti dibawah ini.

<?php
	$host = "localhost";
	$user = "root";
	$pass = "";
	$db   = "db_tes";
	$conn = mysqli_connect($host, $user, $pass, $db);
	
	if(mysqli_connect_errno()){
		echo "Database Not Connected".mysqli_connect_error();
	}
?>

File koneksi.php ini digunakan untuk melakukan koneksi dengan database yang telah kita buat barusan. Masukkan file ini kedalam folder tes yang telah dibuat di htdocs.

  • Membuat File Komunikasi Dengan Perangkat

File komunikasi ini digunakan untuk menerima data dari perangkat IOT kita. Kita menggunakan HTTP Request untuk berkomunikasi dengan perangkat hardware. Tulis kode seperti dibawah ini dan beri nama dataku.php.

<?php
	include('koneksi.php');
	
	date_default_timezone_set('Asia/Jakarta');
	$date = date("Y-m-d");
	$time = date("H:i:s");
	
	$nilai = $_GET['nilai'];
	
	if(isset($nilai)){
	      $sql = mysqli_query($conn,"UPDATE tb_tes SET tanggal='$date',waktu='$time',nilai='$nilai' WHERE id=1");
	      if($sql){
		    echo "HCIX-c0d3r Success";
	      }
	      else{
		    echo "HCIX-c0d3r Error";
	      }
	}
?>

Pada kode diatas bisa kita lihat terdapat GET Request yang mengambil data nilai. Dan melakukan Update pada tb_test yang telah kita buat tadi. Pada artikel yang pernah saya bahas yaitu Sim800L GPRS Mode, sudah saya jelaskan bagaimana perangkat mengirim data dengan menggunakan HTTP Request juga. Jadi sekarang impas, antara perangkat dan server sudah syncron menggunakan komunikasi HTPP Request.

  • Mengambil Data Dari Database

Untuk mengambil data dari database, silahkan ikuti kode dibawah ini dan berikan nama file datakonten.php.

<?php
	include('koneksi.php');
	
	$sql = mysqli_query($conn,"SELECT * FROM tb_tes WHERE id=1");
	$data = mysqli_fetch_assoc($sql);
	
?>
 <h3>Pengiriman Data Terakhir : </h3>
 <h3>Tanggal : <?php echo $data['tanggal']; ?></h3>
 <h3>Waktu : <?php echo $data['waktu']; ?></h3>
 <h3>Nilai : <?php echo $data['nilai']; ?></h3>

Jika kita akses datakonten.php ini, maka kita akan melihat tampilan data pengiriman terakhir, tetapi data tersebut tidak dapat load otomatis ketika terdapat data baru yang telah masuk ke server. Sehingga kita akan membuat tampilan utama yang dapat melakukan load secara otomatis ketika terdapat data yang masuk ke server menggunakan AJAX.

  • Membuat Tampilan Utama Dengan AJAX

Sekarang adalah proses terakhir, yaitu membuat file index sebagai tampilan utama. Buatlah file seperti dibawah ini dan berikan nama index.php.

<html>
	<head>
		<title>HCIX-c0d3r Tester</title>
		<script src="jquery.min.js" type="text/javascript"></script>
		<script src="jquery-latest.js"></script>
		<script language = "javascript">
			$(document).ready(function() {
				$(document).ready(function() {
					$("#konten1").load("datakonten.php");
					var refreshId = setInterval(function() {
					$("#konten1").load('datakonten.php');
					}, 1000);
					$.ajaxSetup({ cache: false });
				});
			});	
		</script>
	</head>
	<body>
		<center>
		<h1>HCIX-c0d3r Tester</h1>
		<div id="konten1"></div>
		</center>
	</body>
</html>

Pada tampilan utama ini terdapat jquery.min.js dan jquery-latest.js agar AJAX berjalan dengan lancar. Jadi jangan lupa ditambahkan dalam satu folder yang sama dengan file lainnya.

Setelah semuanya dibuat, silahkan melakuakan uji coba dengan mengakses url localhost/tes/dataku.php?nilai=9. Kemudian cek pada tampilan utama, jika data berhasil diterima oleh server maka tampilan juga akan menampilkan data yang sama yaitu nilai 9.
Untuk melakukan hosting publish ke web pribadi, jangan lupa mengganti file koneksi.php dengan konfigurasi database server. Silahkan upload file ke server dan selamat mencoba monitoring perangkat IOT milik anda.

Sedikit tutorial yang dapat saya berikan, semoga bermanfaat.

17 Comments

Add a Comment

Your email address will not be published. Required fields are marked *