Manual Book Iot4

/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body>
<div id="div1">
<img src="petapro.gif" alt="Workplace" usemap="#workmap" >
<div class="overlay">
<div class="popup" onclick="myFunction_umbul()">

<div Id="csvg_umbul">
<svg width="40" height="40">
<circle cx="20" cy="20" r="15" stroke="white" stroke-width="4" fill="
<?php
include_once ('connect.php');
$ha = mysqli_query($dbc, "SELECT ha FROM debit WHERE
nba='ubl' order by tgl asc");
while ($p = mysqli_fetch_array($ha)) { $nh= $p['ha'];}
if ($p = ""){$nh = 0;}
if ($nh >= 100){$wrn = "red"; $pt = "Hight";}
if ($nh < 100) {$wrn = "yellow"; $pt = "Medium";}
if ($nh <= 50) {$wrn = "green"; $pt = "Low";}
echo ("$wrn");
?>"/>
</svg>
</div>
<span class="popuptext-umbul" id="myPopup_umbul" ><p>Sta.
Umbul<br><?php echo ($pt) ?><br><a href="vchart/sta_umbul.php">H<?php echo
($nh)?>CM</a></p></span>
</div>
<div class="popup" onclick="myFunction_kasbah()">
<div Id="csvg_kasbah">
<circle cx="20" cy="20" r="15" stroke="white" stroke-width="4"
fill="<?php
nba='kbh' order by tgl asc");
if ($p = ""){$nh = 0;}
echo ("$wrn");
?>"/>
</svg>
</div>
<span class="popuptext-kasbah" id="myPopup_kasbah"><p>Sta.
Kasbah<br><?php echo ($pt) ?><br><a href="vchart/sta_kasbah.php"> H<?php echo
($nh)?>CM</a></p></span>
</div>
<div class="popup" onclick="myFunction_merpati()">

<div Id="csvg_merpati">
fill="<?php
nba='mpt'order by tgl asc");
if ($p = ""){$nh = 0;}
echo ("$wrn");
?>"/>
</svg>
</div>
<span class="popuptext-merpati" id="myPopup_merpati"><p>Sta.
Merpati<br><?php echo ($pt) ?><br><a href="vchart/sta_merpati.php"> H<?php
echo ($nh)?>CM</a></p></span>
</div>
<div class="popup" onclick="myFunction_kedunggaleng()">

<div Id="csvg_kedunggaleng">
fill="<?php
nba='bkg' order by tgl asc");
if ($p = ""){$nh = 0;}
echo ("$wrn");
?>"/>
</svg>
</div>
<span class="popuptext-kedunggaleng"
id="myPopup_kedunggaleng"><p>Sta. Kedunggaleng<br><?php echo ($pt) ?><br><a
href="vchart/sta_kedunggaleng.php"> H<?php echo ($nh)?>CM</a></p></span>
</div>
<div class="popup" onclick="myFunction_legundi()">

<div Id="csvg_legundi">
fill="<?php
nba='lgd' order by tgl asc");
if ($p = ""){$nh = 0;}
echo ("$wrn");
?>"/>
</svg>
</div>
<span class="popuptext-legundi" id="myPopup_legundi"><p>Sta.
Legundi<br><?php echo ($pt) ?><br><a href="vchart/sta_legundi.php"> H<?php
echo ($nh)?>CM</a></p></span>
</div>
</div>
</div>
<script>
var x = "<?php echo $_POST["pemakai"]; ?>, <?php echo $_POST["password"]; ?>";

var y = "a, a";
if ( y != x) {
document.getElementById("div1").style.opacity = "0";
}
else
{
document.getElementById("div1").style.opacity = "1";
}
function myFunction_umbul() {
var popup = document.getElementById("myPopup_umbul");
popup.classList.toggle("show");
}
function myFunction_kasbah() {
var popup = document.getElementById("myPopup_kasbah");
}
function myFunction_merpati() {
var popup = document.getElementById("myPopup_merpati");
}
function myFunction_kedunggaleng() {
var popup = document.getElementById("myPopup_kedunggaleng");
}
function myFunction_legundi() {
var popup = document.getElementById("myPopup_legundi");
}
</script>
<h2>by sdapro</h2>
</body>
</html>
e. File peta “petapro.gif”
File peta kota probolinggo dengan format GIF. Dengan ukuran 1,25 MB
f. Folder dengan nama “Vchart” yang berisi:
1. Chart.bundle.JSscript
2. Chart.bundle.min. JSscript
3. Chart. JSscript
4. Chart.min. JSscript
(download di internet)
5. file shp untuk masing masing Stasiun contoh untuk “sta_umbul.php”
yaitu.
//--------------------------------------------------------
<?php
$hariini = date("'Y-m-d'", time());
$tm = mysqli_query($dbc, "SELECT tgl FROM debit WHERE nba='ubl' and tgl >
$hariini order by tgl asc");
$ha = mysqli_query($dbc, "SELECT ha FROM debit WHERE nba='ubl' and tgl >
$hariini order by tgl asc");
?>
<html>
<head>
<title>chart umbul</title>
<script src="Chart.bundle.js"></script>
<style type="text/css">
.container {
width: 50%;
margin: 5px auto;
}
</style>
</head>
<body>
<h3>sta. Umbul</h3>
<div class="container">
<canvas Id="myChart" width="100" height="70"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<?php while ($b = mysqli_fetch_array($tm)){ echo '"' . $b['tgl'].
'",';}?>],
datasets: [{
label: '= Tinggi air (cm)',
data: [<?php while ($p = mysqli_fetch_array($ha)) { echo '"' . $p['ha']
. '",';}?>],
backgroundColor: [
'rgba(54, 162, 235, 0.2)'],
borderColor: [
'rgba(54, 162, 235, 1)'],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>

Manual Book Iot4

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

Manual Book Iot4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual Book Iot4

Uploaded by

Copyright:

Available Formats

/* Toggle this class - hide and show the popup */

/* Add animation (fade in the popup) */

<img src="petapro.gif" alt="Workplace" usemap="#workmap" >

<div class="popup" onclick="myFunction_umbul()">

<div class="popup" onclick="myFunction_merpati()">

<div class="popup" onclick="myFunction_kedunggaleng()">

<div class="popup" onclick="myFunction_legundi()">

var x = "<?php echo $_POST["pemakai"]; ?>, <?php echo $_POST["password"]; ?>";

You might also like