Gigih Forda Nama – An Ordinary People

Aplikasi Monitoring – Kegiatan Operasional Internet (KorNet)

Gigih Forda Nama
Advertisements

Application Programming Interface atau lebih dikenal dengan API, merupakan suatu sistem yang dapat difungsikan untuk menerima request atau permintaan dari sistem/platform lainnya  menggunakan teknologi web seperti request GET, POST, PUT, DELETE, dll.

Mikrotik (MRT) sebagai salah satu brand Networking yang banyak digunakan pada berbagai organisasi juga menyediakan layanan API, memungkinkan aplikasi di luar sistem Mikrotik bisa berinteraksi secara langsung. Dalam tutorial kali ini membahas tentang bagaimana cara membuat aplikasi monitoring traffik yang lalu lalang pada interface MRT.

<?php
////////////////////////////////////////////////////////////////////
// API PHP DAN MIKROTIK /////////////////////////////////////////////
// Create By: Nicolas Daitsch, Modify by Gigih Forda Nama////////////
// Contact: gigih@eng.unila.ac.id/////// //////////////////////////
// Router OS Dengan API////////////////////////////////// //////////
//////////////////////////////////////////////////////////////////// ?>
<?php require_once(‘api_mt_include2.php’); ?>
<?php
$ipRouteros = “xxx.3.46.xxx”;
$Username=”UserMikrotik”;
$Pass=”PasswordMT”;
$api_port=8728;

$API = new routeros_api();
$API->debug = false;
if ($API->connect($ipRouteros , $Username , $Pass, $api_port)) {
$rows = array(); $rows2 = array();
$API->write(“/interface/monitor-traffic”,false);
$API->write(“=interface=NamaInterfaceAnda”,false);
$API->write(“=once=”,true);
$READ = $API->read(false);
$ARRAY = $API->parse_response($READ);
if(count($ARRAY)>0){
$rx = number_format($ARRAY[0][“rx-bits-per-second”]/1024,1);
$tx = number_format($ARRAY[0][“tx-bits-per-second”]/1024,1);
$rows[‘name’] = ‘Tx’;
$rows[‘data’][] = $tx;
$rows2[‘name’] = ‘Rx’;
$rows2[‘data’][] = $rx;
}else{
echo $ARRAY[‘!trap’][0][‘message’];
}
}else{
echo “<font color=’#ff0000′>Koneksi Anda Gagal.</font>”;
}
$API->disconnect();

$result = array();
array_push($result,$rows);
array_push($result,$rows2);
print json_encode($result, JSON_NUMERIC_CHECK);

?>

<!–
////////////////////////////////////////////////////////////////////
// API PHP DAN MIKROTIK /////////////////////////////////////////////
// Create By: Nicolas Daitsch, Modify by Gigih Forda Nama////////////
// Contact: gigih@eng.unila.ac.id/////// //////////////////////////
// Router OS Dengan API////////////////////////////////// //////////
//////////////////////////////////////////////////////////////////// ?>
–>
<!DOCTYPE HTML>
<html lang=”id”>
<head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<title>KORNET- KOR INTERNET UNILA</title>
https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

<script>
var chart;
function requestDatta(interface) {
$.ajax({
url: ‘data.php?interface=’+interface,
datatype: “json”,
success: function(data) {
var midata = JSON.parse(data);
if( midata.length > 0 ) {
var TX=parseInt(midata[0].data);
var RX=parseInt(midata[1].data);
var x = (new Date()).getTime();
shift=chart.series[0].data.length > 19;
chart.series[0].addPoint([x, TX], true, shift);
chart.series[1].addPoint([x, RX], true, shift);
document.getElementById(“Trafik Internet Unila”).innerHTML=” Downstream= ” + TX +” Mbps ” + ” / ” + ” Upstream= ” + RX +” Mbps ” ;
}else{
document.getElementById(“Trafik Internet Unila”).innerHTML=”- / -“;
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.error(“Status: ” + textStatus + ” request: ” + XMLHttpRequest); console.error(“Error: ” + errorThrown);
}
});
}

$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});

chart = new Highcharts.Chart({
chart: {
renderTo: ‘container’,
animation: Highcharts.svg,
type: ‘spline’,
events: {
load: function () {
setInterval(function () {
requestDatta(document.getElementById(“interface”).value);
}, 1000);
}
}
},
title: {
text: ‘KORNET – Kegiatan Operasional Internet Unila’
},
xAxis: {
type: ‘datetime’,
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: ‘Trafik Internet Unila (Mbps)’,
margin: 80
}
},
series: [{
name: ‘Downstream- TX (Mbps)’,
data: []
}, {
name: ‘Upstream- RX (Mbps)’,
data: []
}]
});
});
</script>

</head>
<body>
http://highchart/js/highcharts.js
http://highchart/js/themes/dark-green.js
<b>
<div id=”container” style=”min-width: 400px; height: 610px; margin: 0 auto”></div>
<div style=”text-align:center”>
<input name=”interface” id=”interface” type=”text” value=”Powered By UIRG Unila” />
</div>

<div id=”Trafik Internet Unila” style=”text-align:center” ></div>
</b>
</body>
</html>

Advertisements

Advertisements