116
MATERI 8 : WEB HOSTING (FINAL
117
agar bisa membuat website sesuai dengan yang kita inginkan. Jika sudah mendaftar maka halaman awal website tersebut dapat dilihat pada Gambar 90.
Gambar 90 Tampilan Halaman Awal Akun 000webhost.
2. Untuk membuat website baru, silakan klik tombol “+ create new site”. Kemudian akan muncul seperti pada Gambar 91. Kita isikan nama dan password websitenya sesuai dengan yang kita inginkan. Setelah kita isikan parameter tersebut, kita klik tombol create dan akan muncul tampilan website seperti pada Gambar 92
Gambar 91 Tampilan Pembuatan Website Baru.
118
Gambar 92 Tampilan Website yang Telah DIbuat.
3. Untuk melihat informasi dari halaman website yang telah kita buat, kita tekan di tabulasi sebelah kiri menu website settings -> general. Setelah diklik, maka akan muncul tampilan seperti pada Gambar 93. Pada panel FTP Detailed Information, kita mendapati beberapa informasi seperti toggle untuk FTP transfer, host name yang akan dijadikan sebagai tujuan pengiriman file, port komunikasi yang digunakan, dan username serta password yang kita buat sebelumnya.
Gambar 93 Tampilan Informasi FTP Website.
4. Setelah kita mengetahui informasi untuk FTP website tersebut, langkah selanjutnya adalah kita membuka aplikasi filezilla untuk mengirimkan file php-nya. Kita masukkan detail host, username, password, dan port sesuai dengan informasi yang kita dapatkan pada langkah nomor tiga lalu klik quickconnect. Filezilla akan menghubungi host untuk mengambil beberapa data yang diminta dan menampilkan seperti pada Gambar 94. Jika sudah terkoneksi dengan baik pada panel sebelah kanan bawah yang bernama filename, akan muncul dua buah folder, yaitu public_html dan tmp. Kemudian, kita klik folder public_html untuk memasukan file php yang kita buat nantinya. Di dalam folder tersebut nantinya akan berisi file yang bernama .htaccess (lihat Gambar 95).
119
Gambar 94 Tampilan Awal Filezilla Terkoneksi dengan Host.
Gambar 95 Tampilan Isi Folder Public_html.
5. Sebelum kita melangkah lebih lanjut, sekarang kita buat file php dengan menggunakan notepad++.
Buka notepad++, kemudian tuliskan koding PHP yang ada di bagian materi ini (letaknya di bawah koding C++). Setelah diketikkan, maka kita simpan file tersebut sebagai file dengan tipe php bernama esppost2 (nama boleh diubah, namun tipe file tidak boleh diubah).
6. Setelah file tersebut dibuat, langkah selanjutnya adalah kita akan mengunggah file tersebut ke halaman website kita menggunakan filezilla. Klik dan tekan file esppost2.php kemudian seret file tersebut ke arah panel filename. Filezilla akan mengunggah file yang kita taruh di panel filename.
Jika sudah selesai mengunggah file tersebut, maka file tersebut akan muncul di panel filename dan pada bagian atas, akan bertuliskan status file transfer successsful (Gambar 96).
7. Langkah selanjutnya adalah kita mengetikkan koding yang ada pada bagian koding C++.
8. Setelah diketikkan, diunggah ke wemos yang kita gunakan dan setelah selesai diunggah kita buka serial monitor untuk memantau kerja dari wemos tersebut.
120
Gambar 96 Tampilan Filezilla Setelah Pengunggahan File PHP.
Koding C++
#include <ESP8266WiFi.h>
#include <DHTesp.h>
#include <ESP8266HTTPClient.h>
#define DHTPin D4
#define STASSID "bagus"
#define STAPASS "bagusgilang"
const String host = "bgilangp.000webhostapp.com";
const String urlPost = "/esppost.php";
const byte port = 80;
float temperature, humidity;
DHTesp dht;
String readDHT () {
String temp, hum;
temp = String(dht.getTemperature());
hum = String(dht.getHumidity());
return ("temperature=" + temp + "&humidity=" + hum);
}
void setup() {
// put your setup code here, to run once:
Serial.begin(115200);
dht.setup(DHTPin, DHTesp::DHT11);
121
Serial.print("Connecting to :");
Serial.println(STASSID);
WiFi.mode(WIFI_STA);
WiFi.begin(STASSID, STAPASS);
while (WiFi.status() != WL_CONNECTED) { delay(100);
Serial.print(".");
}
if (WiFi.status() == WL_CONNECTED) { Serial.println("WiFi connected");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
}
else return;
}
void loop() {
// put your main code here, to run repeatedly:
Serial.print("connecting to ");
Serial.print(host);
Serial.print(":");
Serial.println(port);
WiFiClient client;
if (!client.connect(host, port)) { Serial.println("connection failed");
delay(1000);
return;
}
if (client.connected()) { String dataDHT = readDHT();
String postRequest =
"POST " + urlPost + " HTTP/1.1\r\n" + "Host: " + host + "\r\n" +
"Accept: *" + "/" + "*\r\n" +
"Content-Length: " + dataDHT.length() + "\r\n" +
"Content-Type: application/x-www-form-urlencoded\r\n" + "\r\n" + dataDHT;
client.println(postRequest);
}
unsigned long timeout = millis();
while (client.available() == 0) { if (millis() - timeout > 5000) {
Serial.println(">>> Client Timeout !");
122
client.stop();
delay(5000);
return;
} }
Serial.println("receiving from host");
while (client.available()) {
char ch = static_cast<char>(client.read());
Serial.print(ch);
}
Serial.println();
Serial.println("closing connection");
client.stop();
delay(3000);
}
Koding PHP
<?php
if (isset($_POST["temperature"]) && isset($_POST["humidity"])) {
//create variable that will receive the temperature $Temp = $_POST["temperature"];
//create variable that will receive the humidity $Humidity = $_POST["humidity"];
//create an HTML file to display the data within $Write= "<!DOCTYPE html>" .
"<html>" . "<head>" .
"<meta name=\"viewport\" content=\"width=device-width, initial- scale=1\">" .
"<link rel=\"icon\" href=\"data:,\">" .
"<style>html { font-family: Helvetica; display: inline-block;
margin: 0px auto; text-align: center;}</style>" . "</head>" .
"<body>" .
"<p>IOT By Bagus Gilang Pratama</p>" .
"<p>temperature : " . $Temp . " Celcius </p>" . "<p>humidity : " . $Humidity . " % </p>" .
"</body>";
file_put_contents('index.html',$Write);
}
?>
Penjelasan Koding C++
#include <ESP8266WiFi.h>
#include <DHTesp.h>
#include <ESP8266HTTPClient.h>
#define DHTPin D4
#define STASSID "bagus"
123
#define STAPASS "bagusgilang"
const String host = "bgilangp.000webhostapp.com";
const String urlPost = "/esppost.php";
const byte port = 80;
float temperature, humidity;
DHTesp dht;
Pada syntax di atas, kita memasukkan beberapa library yang dibutuhkan sebagai sarana komunikasi antara wemos dan host serta untuk mengaktifkan DHT dan membaca tempratur darinya. Kita memasukkan detail untuk koneksi dengan WiFi dan menandakan pin mana yang digunakan sebagai masukkan data dari DHT11. Kemudian, kita membuat variabel host yang berisi alamat dari website yang kita buat, url yang berisi tujuan khusus dari alamat tersebut, port yang bermaksud jalur komunikasi wemos, temprature dan humidity yang akan diisi nilai dari sensor DHT11, dan dht yang merupakan kelas untuk mengakses sensor DHT11.
String readDHT () {
String temp, hum;
temp = String(dht.getTemperature());
hum = String(dht.getHumidity());
return ("temperature=" + temp + "&humidity=" + hum);
}
Fungsi yang kita buat di atas berguna untuk membentuk salah satu bagian dari HTTP REQUEST. Kita membaca sensor dari DHT11 kemudian menggabungkannya ke dalam satu string yang nantinya akan digabungkan dengan bagian dari HTTP REQUEST. HTTP REQUEST tersebut akan dikirim ke host untuk memperbaharui nilai temperature dan humidity di website-nya.
void setup() {
// put your setup code here, to run once:
Serial.begin(115200);
dht.setup(DHTPin, DHTesp::DHT11);
Serial.print("Connecting to :");
Serial.println(STASSID);
WiFi.mode(WIFI_STA);
WiFi.begin(STASSID, STAPASS);
while (WiFi.status() != WL_CONNECTED) { delay(100);
Serial.print(".");
}
if (WiFi.status() == WL_CONNECTED) { Serial.println("WiFi connected");
Serial.print("IP address: ");
124
Serial.println(WiFi.localIP());
}
else return;
}
Syntax di atas berguna untuk menghubungkan wemos dengan jaringan wifi yang ditentukan dan menentukan jenis DHT yang digunakan dalam pembacaan nilai temperature dan humidity. Jika sudah terhubung, wemos akan mencetak IP address yang diberikan oleh router dan jika gagal wemos akan mencoba menghubungkan ulang dengan router yang ditentukan.
void loop() {
Serial.print("connecting to ");
Serial.print(host);
Serial.print(":");
Serial.println(port);
WiFiClient client;
if (!client.connect(host, port)) { Serial.println("connection failed");
delay(1000);
return;
}
if (client.connected()) { String dataDHT = readDHT();
String postRequest =
"POST " + urlPost + " HTTP/1.1\r\n" + "Host: " + host + "\r\n" +
"Accept: *" + "/" + "*\r\n" +
"Content-Length: " + dataDHT.length() + "\r\n" +
"Content-Type: application/x-www-form-urlencoded\r\n" + "\r\n" + dataDHT;
client.println(postRequest);
}
Di dalam void loop, kita mencoba menghubungkan wemos dengan host menggunakan port yang kita tentukan sebelumnya. Jika terjadi kegagalan koneksi maka wemos akan mengulangi koneksi dengan host yang bersangkutan. Jika telah terkoneksi, kita memerintahkan wemos untuk menjalankan fungsi readDHT().
Setelah itu, kita membuat bagian untuk melakukan post request sesuai dengan template yang telah ditentukan. Nilai temperature dan humidity yang akan dikirimkan ke website kita taruh di bagian bawah setelah “content-Type”.
unsigned long timeout = millis();
while (client.available() == 0) { if (millis() - timeout > 5000) {
Serial.println(">>> Client Timeout !");
client.stop();
delay(5000);
return;
125
} }
Serial.println("receiving from host");
while (client.available()) {
char ch = static_cast<char>(client.read());
Serial.print(ch);
}
Serial.println();
Serial.println("closing connection");
client.stop();
delay(3000);
}
Pada koding di atas, setelah kita melakukan post request, kita menunggu jawaban dari server. Waktu tunggu untuk menerima jawaban tersebut adalah lima detik. Jika gagal, maka wemos akan kita perintahkan untuk kembali ke awal dan mengirimkan ulang post request. Jika terdapat jawaban dari server, kita mencetak jawaban tersebut di serial monitor hingga pesan terakhir. Setelah mencetak, kita memutuskan hubungan dengan server menggunakan prosedur client.stop() dan menunggu selama tiga detik sebelum melakukan pengiriman ulang ke website yang bersangkutan.
Penjelasan Koding Notepad++
<?php
if (isset($_POST["temperature"]) && isset($_POST["humidity"])) {
//create variable that will receive the temperature $Temp = $_POST["temperature"];
//create variable that will receive the humidity $Humidity = $_POST["humidity"];
//create an HTML file to display the data within $Write= "<!DOCTYPE html>" ………
file_put_contents('index.html',$Write);
}
?>
Pada baris pertama, kita menyatakan bagian ini merupakan domain dari php. Baris kedua berisi tentang pernyataan tentang pembentukan variabel post yang bernama temperature dan humidity. Kedua variabel ini nantinya, akan menerima nilai dari post request yang dilakukan oleh client. Pada baris kelima, variabel post akan dimasukkan ke dalam variabel php yang bernama temp, begitu juga dengan variabel post humidity dimasukkan ke dalam variabel humidity. Langkah selanjutnya adalah kita membentuk variabel bernama Write yang berisi syntax dari html. Di dalam syntax tersebut, nanti akan terdapat nilai yang kita dapat dari post request client.