WEB
Embedded Files
Web dijadikan sebagai perantara antara user dengan perangkat IoT untuk berinteraksi.
Hal yang harus dipelajari dalam pembuatan web ini:
Bahasa HTML --> untuk membuat tampilan web sederhana
Bahasa CSS --> untuk membuat tampilan web menjadi lebih menarik
Bahasa JavaScript --> untuk membuat alur kerja dari sebuah Web
Hosting --> untuk mengonlinekan sebuah web supaya bisa diakses dimana saja.
Bahasa PHP (tidak wajib) --> untuk membuat sebuah interaksi antar halaman web
Bahasa SQL (tidak wajib) --> untuk menyimpan data di dalam database
Software yang diperlukan:
Vs Code, atau Note++ , atau Sublime Text (pilih salah satu)
Tutorial WEB-MQTT
Buka Vscode atau Note++ atau Sublime text (salah satu)
Buat sebuah file dengan NamaBebas.html
Masukkan Code berikut
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MQTT</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
}
h1 {
text-align: center;
color: rgb(67, 108, 110);
}
.cont-suhu {
background-color: aqua;
border-style: solid;
border-color: aqua;
width: 150px;
height: 100px;
border-radius: 12px;
margin: auto;
padding: 2px;
display: block;
justify-content: center;
box-shadow: 5px 5px 15px rgb(23, 62, 93);
margin-top: 12px;
}
p {
text-align: center;
margin-top: 2px;
font-size: 20px;
color: rgb(23, 62, 93);
font-weight: bold;
}
.der {
margin-top: 0px;
text-align: center;
font-size: 35px;
}
button {
margin: auto;
width: 100px;
height: 30px;
border-radius: 12px;
transition-duration: 150ms;
font-size: 14px;
}
button:hover {
cursor: pointer;
width: 120px;
height: 40px;
font-size: 18px;
background-color: darkblue;
color: white;
font-weight: bold;
}
.tbl {
text-align: center;
margin-top: 8px;
}
footer {
text-align: end;
margin-right: 4px;
font-size: 10px;
}
</style>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
<h1>Belajar MQTT</h1>
<div>
<div class="cont-suhu">
<p>suhu</p>
<p class="der" id="suhu">0 °C</p>
</div>
<div class="cont-suhu">
<p>Kelembaban</p>
<p class="der" id="kel">0 %</p>
</div>
<div class="cont-suhu">
<p>Tanah</p>
<p class="der" id="tanah">0 </p>
</div>
</div>
<div class="tbl">
<button onclick="kirimOn()" id="nyala">Nyalakan</button>
</div>
<div class="tbl">
<button onclick="kirimOff()" id="mati">Matikan</button>
</div>
</body>
<footer>M. Afdal Zikri || BPVP Belitung || 2025</footer>
</html>
<script>
let suhu = document.getElementById('suhu');
let kel = document.getElementById('kel');
let tanah = document.getElementById('tanah');
let angkaOn = 1;
let angkaOff = 0;
const client = mqtt.connect('wss://mqtt-dashboard.com:8884/mqtt');
client.on ('connect', () => {
console.log('terhubung');
client.subscribe('coba/data/+');
});
client.on ('message', (topic, message) => {
let data = parseInt(message);
console.log(data);
if (topic == 'coba/data/suhu' ) {
suhu.innerText = data + " \u00B0C";
}
if (topic == 'coba/data/kel' ) {
kel.innerText = data + " %";
}
if (topic == 'coba/data/tanah' ) {
tanah.innerText = data;
}
if (topic == 'coba/data/angka'){
if (data == 1) {
document.getElementById('nyala').style.backgroundColor = 'green';
document.getElementById('mati').style.backgroundColor = 'white';
document.getElementById('nyala').style.color = 'black';
document.getElementById('mati').style.color = 'black';
}
else {
document.getElementById('nyala').style.backgroundColor = 'white';
document.getElementById('mati').style.backgroundColor = 'red';
document.getElementById('nyala').style.color = 'black';
document.getElementById('mati').style.color = 'black';
}
}
});
function kirimOn(){
console.log(angkaOn);
client.publish("coba/data/angka", angkaOn.toString(),{ qos: 1, retain: true });
}
function kirimOff(){
console.log(angkaOff);
client.publish("coba/data/angka", angkaOff.toString(),{ qos: 1, retain: true });
}
</script>
Simpan di direktori PC
Jalankan secara localhost (tanpa jaringan)
Jika sudah benar, lanjutkan dengan hosting gratis
Tutorial WEB-ThingSpeak
Buka Vscode atau Note++ atau Sublime text (salah satu)
Buat sebuah file dengan NamaBebas.html
Masukkan Code berikut
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThingSpeak</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
}
h1 {
text-align: center;
color: cadetblue;
}
.bungkus {
display: block;
justify-items: center;
}
.container {
background-color: azure;
width: 150px;
height: 150px;
border-radius: 12px;
padding: 2px;
margin-bottom: 8px;
}
.suhu {
font-size: 20px;
text-align: center;
}
.bilangan {
font-size: 32px;
text-align: center;
font-weight: bold;
}
button {
background-color: aqua;
width: 80px;
height: 40px;
border-radius: 12px;
transition: 100ms;
}
button:hover {
width: 100px;
height: 50px;
cursor: pointer;
background-color: darkcyan;
color: aliceblue;
}
footer {
font-size: 10px;
text-align: right;
margin-right: 4px;
margin-top: 18px;
}
</style>
</head>
<body>
<h1>Belajar Koneksi ThingSpeak</h1>
<div class="bungkus">
<div class="container">
<p class="suhu">Suhu</p>
<p class="bilangan" id="suhu">0 °</p>
</div>
<div class="container">
<p class="suhu">Kelembapan</p>
<p class="bilangan" id="kel">0 %;</p>
</div>
<div class="tbl">
<button onclick="kirimOn()" id="nyala">Nyalakan</button>
<button onclick="kirimOff()" id="mati">Matikan</button>
</div>
</div>
<script>
const urlPompa = "https://api.thingspeak.com/channels/2675036/fields/1/last";
const urlSuhu = "https://api.thingspeak.com/channels/2675036/fields/2/last";
const urlKel = "https://api.thingspeak.com/channels/2675036/fields/3/last";
let suhu = document.getElementById('suhu');
let kel = document.getElementById('kel');
let nyala = document.getElementById('nyala');
let mati = document.getElementById('mati');
function bacaData (){
fetch(urlPompa).then(response => response.json()).then(data => {
console.log(data);
if (data == 1){
nyala.style.backgroundColor = 'green';
mati.style.backgroundColor = 'aqua';
}
else {
nyala.style.backgroundColor = 'aqua';
mati.style.backgroundColor = 'red';
}
})
.catch(error => console.error("gagal"));
}
function bacaSuhu(){
fetch(urlSuhu).then(suhu => suhu.json()).then(data => {
console.log(data);
suhu.textContent = data +" \u00B0C";
}
).catch(error => console.error('gagal membaca suhu'));
}
function bacaKel(){
fetch(urlKel).then(kel => kel.json()).then(data => {
console.log(data);
kel.textContent = data + " %";
}).catch(error => console.error('gagal membaca kelembapan'));
}
function kirimOn() {
fetch('https://api.thingspeak.com/update?api_key=LYWSZNXT9RVWTLHK&field1=1')
.then(response => response.text())
.then(data => {
if (data > 0) {
console.log('ON berhasil. Entry ID:', data);
} else {
console.error('Gagal mengirim data ke ThingSpeak (kemungkinan rate limit)');
}
})
.catch(error => console.error('Gagal on pompa:', error));
}
function kirimOff() {
fetch('https://api.thingspeak.com/update?api_key=LYWSZNXT9RVWTLHK&field1=0')
.then(response => response.text())
.then(data => {
if (data > 0) {
console.log('Off berhasil. Entry ID:', data);
} else {
console.error('Gagal mengirim data ke ThingSpeak (kemungkinan rate limit)');
}
})
.catch(error => console.error('Gagal off pompa:', error));
}
bacaSuhu();
bacaKel();
bacaData();
setInterval(bacaSuhu,2000);
setInterval(bacaKel,2000);
setInterval(bacaData,2000);
</script>
</body>
<footer>
M. Afdal Zikri || BPVP Belitung || 2025
</footer>
</html>
Simpan di direktori PC
Jalankan secara localhost (tanpa jaringan)
Jika sudah benar, lanjutkan dengan hosting gratis
Page updated
Google Sites
Report abuse