Arduino Web Server Sd Card Html

MUAZHAN

5 min read

·

Jul 02, 2024

31

Share

Arduino Web Server dengan SD Card dan HTML

Artikel ini akan membahas cara membuat web server sederhana di Arduino dengan menggunakan SD Card untuk menyimpan file HTML. Dengan ini, Anda dapat menampilkan halaman web sederhana di perangkat yang terhubung ke Arduino melalui jaringan WiFi.

Persiapan

Peralatan yang dibutuhkan:

• Arduino Uno (atau board Arduino lainnya)
• SD Card (dengan adaptor jika diperlukan)
• Modul WiFi ESP8266 (atau modul WiFi lain yang kompatibel)
• Kabel Jumper
• Komputer dengan IDE Arduino

Perangkat Lunak:

• IDE Arduino (unduh di )
• Library SD.h (sudah terpasang di IDE Arduino)
• Library ESP8266WiFi.h (unduh dan instal dari Library Manager di IDE Arduino)

Kode Arduino

Berikut adalah kode Arduino yang digunakan untuk membuat web server sederhana:

#include 
#include 
#include 

const char* ssid = "Nama Jaringan WiFi";     // Ganti dengan nama jaringan WiFi Anda
const char* password = "Password Jaringan WiFi";   // Ganti dengan password jaringan WiFi Anda
const int chipSelect = 5;      // Pin chip select untuk SD Card

// File HTML yang akan dilayani
const char* index_html = "index.html";

void setup() {
  // Inisialisasi serial
  Serial.begin(115200);

  // Inisialisasi SD Card
  if (!SD.begin(chipSelect)) {
    Serial.println("Kartu SD gagal diinisialisasi!");
    return;
  }

  // Hubungkan ke jaringan WiFi
  Serial.print("Menghubungkan ke ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("Terhubung!");
  Serial.print("Alamat IP: ");
  Serial.println(WiFi.localIP());
}

void loop() {
  // Tangani koneksi client
  WiFiClient client = server.available();
  if (client) {
    Serial.println("Klien terhubung!");

    // Kirim file HTML
    String request = client.readStringUntil('\r');
    Serial.print(request);

    // Kirim halaman index.html
    File file = SD.open(index_html);
    if (file) {
      while (file.available()) {
        client.write(file.read());
      }
      file.close();
    } else {
      Serial.println("Gagal membuka file HTML");
    }

    client.stop();
    Serial.println("Klien terputus!");
  }
}

File HTML

Buat file HTML bernama index.html dan simpan di SD Card. Anda dapat memasukkan konten HTML apa pun di file ini, misalnya:

  
Selamat datang di Web Server Arduino!
  
Ini adalah halaman web sederhana yang dilayani oleh Arduino.

Cara Mengoperasikan

1. Hubungkan semua perangkat keras.
2. Unggah kode Arduino ke Arduino Uno.
3. Pastikan SD Card sudah terpasang dengan benar.
4. Hubungkan Arduino ke jaringan WiFi Anda.
5. Buka browser web di perangkat Anda dan masukkan alamat IP Arduino yang tertera di serial monitor.
6. Anda akan melihat halaman web yang Anda buat di SD Card.

Catatan

• Pastikan nama file HTML yang Anda gunakan di kode Arduino sama dengan nama file HTML di SD Card.
• Anda dapat menambahkan lebih banyak file HTML di SD Card dan mengaksesnya dengan mengubah nama file di kode Arduino.
• Kode ini hanya contoh sederhana. Anda dapat mengembangkannya dengan menambahkan fitur lain seperti formulir, tombol, dan interaksi dengan Arduino.

Dengan menggunakan metode ini, Anda dapat membuat web server sederhana di Arduino untuk mengontrol perangkat atau menampilkan informasi di halaman web.