Send data to mysql with enc28j60

Introduction: PART 1 - Send Arduino Data to the Web ( PHP/ MySQL/ D3.js )

The objective of this project was to use and Arduino to read a sensor and send the values to the internet, to be stored in a Web Server and displayed.

It consists in an Arduino Uno with an Ethernet Shield and a DHT 11 temperature / moisture sensor, acting as a Web Client. It sends POST requests with the readings to a web server running a custom Database and PHP application.

The PHP app stores the values when new POST requests are received and also serves the pages that display the information. In Part 2, i will explain the use of D3.js to dynamically show the data stored in the Database.

The Arduino it's configured to use a Dynamic IP Address, in order to solve any conflicting IP issues, and also to work easily with most home networks/routers.

This project is divided in 2 main parts:

PART 1

- Arduino Web client Application: reads the sensor values and sends them to the webserver.
- PHP/MySQL Application: handles the POST requests that are sent to the server and serves the pages to clients who connect 

PART 2

- Data Visualization: The PHP application will use the Javascript Framework D3.js to display the values stored in the DB with graphics. It will allow to navigate to the past days to observe the readings

REQUIREMENTS

HARDWARE

  1. Arduino Uno
  2. Ethernet Shield (eBay clone)
  3. DHT 11 sensor
  4. breadboard
  5. 10k Ohm resistor
  6. USB cable
  7. Ethernet cable
  8. wires
  9. piece of acrylic
  10. PCB spacers

Software

- You need access to a web server ( can be from a free hosting company ) with capability to run PHP applications and also to create databases. ( possibly cPanel with phpMyAdmin)

RESOURCES

Request Maker: This online tool is very useful to test the PHP application. You can simulate the POST requests that will be made by the Arduino and check if everything is working well.

DHT11 sensor library from Adafruit

Arduino Web Client

Arduino IDE

Arduino Ethernet

Step 1: Arduino Web Client + DHT11 Sensor

The code is very simple, all the important section are commented. If you have any doubt feel free to ask.

Step 2: PHP / MySQL Application

In this second part i will explain briefly the PHP application and the database. The database is used obviously to store the sensor readings, so that they can be accessed later. It's a very simple DB, with just one table with 3 columns. It stores the time stamp and the corresponding temperature and humidity values.

	CREATE TABLE tempLog (
		timeStamp TIMESTAMP NOT NULL PRIMARY KEY,
		temperature int(11) NOT NULL,
		humidity int(11) NOT NULL,
	);

The PHP application consists of 3 files:

- connect.php: this file is loaded every time we need to access to the database. It's loaded in the beginning of the almost each file. It contains a function that returns a new connection to be used by the PHP to execute query's to the DB. You need to store the DB configs (hostname, database, user, password) in this file.

- add.php: when the Arduino sends POST requests to the server, is to to this page. The PHP receives the values sent in the request and executes an insertion query with those values.

Sometimes you need to change the permissions of this file (should be 644), because it might be protected to allow only executions from the localhost.

- index.php: this is the website landing page. It displays the values that are stored in the database. Right now, it will display all the values in a single HTML table, just to show that works.

So, this concludes the first part of this Instructable. Feel free to ask questions about anything related, i'm glad to help.

5 People Made This Project!

Recommendations

Send data to mysql with enc28j60

Di artikel ini kita akan membahas suatu hal yang baru, yaitu mengenai pemograman, bagi yang belum mengetahui admin blog ini jurusannya informatika loh, postingannya aja ada yang berhubungan tentang mata kuliah informatika, walaupun cuman buat download materi aja sih, tanpa pembahasan materi langsung, saya harap tetap bermanfaat.

Kodingan yang akan kita bahas kali ini adalah tentang arduino dan sesuai judul saya lebih memfokuskan ke pembuatan database pada perangkat Ethernet yang menggunakan chip  ENC28J60. Hal ini dilatar belakangi karena belum ada ide judul lain sekaligus membantu sobat yang lagi kesulitan membuat database dengan chip Ethernet ENC28J60, kesusahan yang saya alami ada pada documentasi source codenya yang harus meraba-raba, diinternet kita hanya diberikan contoh program dari Ethernet ENC28J60, lalu untuk memahaminya kita harus mengindetifikasi kegunaan fungsi-fungsi kodingan yang ada didalamnya dengan bereksperimen, untuk memastikan sobat berkunjung ke tutorial yang tepat inilah bentuk perangkat ENC28J60 yang saya maksud.

Send data to mysql with enc28j60

Bahan-bahan yang perlu diperhatikan sebelum mengikuti tutorial ini adalah.

  1. Komputer dengan OS windows.
  2. Sudah install xampp, text editor(php, html, javascript), dan IDE arduino (klik kalau mau download).
  3. Ethernet dengan chip ENC28J60.
  4. Arduino board (diutakan yang UNO).
  5. Kabel Jumper Male-Female.
  6. Kabel LAN/UTP.
  7. Kapel printer buat upload source code ke arduino.
  8. Koneksi internet buat cari solusi(opsional).

Pertama utntuk mengoneksikan ke database tentunya terlebih dahulu kita harus menghubungkan ENC28J60 ke Arduino dengan aturan sambungan seperti gambar dibawah ini. Tanda panah merah yang saya taruh pada gambar dibawah merupakan tanda bahwa kolom Arduino Uno bisa diganti dengan nilai lain yang berwarna merah digambar, hal tersebut dilakukan jika Ethernet Shieldnya masih belum berfungsi setelah dikoneksikan ke komputer.

Send data to mysql with enc28j60

Masih belum jelas juga?? sobat bisa melihat video youtube dibawah ini.


Setelah merakit Ethernet ENC28J60 dengan Adruino, selanjutnya kita perlu mendownload library dari Ethernet ENC28J60 pada situs Jeelab.org, supaya library tersebut dikenali oleh aplikasi IDE adruino, ekstrak terlebih dahulu lalu letakkan folder ethernet tersebut di Document-> Arduino -> Library.

Send data to mysql with enc28j60

Cek terlebih dahulu apakah library tersebut terbaca oleh IDE arduino dikomputer sobat dengan membuka aplikasi IDE arduino lalu klik file-> example -> dan scrool ke bagian paling bawah yang merupakan kumpulan library tambahan, jika ada nama yang sama dengan nama folder yang baru dipindahkan tadi maka dalam tahap ini sobat sudah berhasil.

Send data to mysql with enc28j60

Sekarang waktunya untuk uji coba perangkat Ethernetnya, untuk itu siapkan contoh source codenya terlebih dahulu, kita akan menggunakan rbbb_server untuk contohnya, contoh ini juga akan menjadi source code yang akan kita modifikasi nantinya agar bisa terhubung ke database. Cara membukanya hampir sama dengan yang tadi, sobat tinggal mengarahkan ke library Ethernetnya dan pilih rbbb_server.

Send data to mysql with enc28j60

Setelah contoh rbbb_server terbuka maka source codenya akan persis dengan gambar dibawah ini, bisa sobat lihat digambar bahwa yang ditunjuk dengan panah merah tersebut adalah alamat yang akan di masukkan di alamat browser internet nantinya.

Send data to mysql with enc28j60

Setelah itu pastikan arduino sobat sudah terhubung dengan komputer menggunakan media kabel printer yang sudah kita siapkan tadi, dan portnya sudah dipilih/dicentang, hal-hal kecil seperti ini bagi para programer jangan dilupakan karena bisa pusing sendiri. untuk memilih port sobat pilih menu di atas Tools -> Port, atau lihat gambar dibawah ini, jika semua sudah, klik upload

Send data to mysql with enc28j60
.

Send data to mysql with enc28j60

Sekarang tinggal menghubungkan Ethernet ENC28J60 ke komputer dengan menggunakan kabel LAN/UTP, jangan senang dulu, karena kita tidak menggunakan DHCP maka harus mensetting Ip Address secara manual di pengaturan windows.

Send data to mysql with enc28j60

Cari setingan network seperti diatas, lalu klik Ethenet -> Properties

Send data to mysql with enc28j60

Cari tulisan internet Protocol Version 4 (TCP/IPv4) lalu klik properties, lalu akan muncul seperti gambar dibawah ini.

Send data to mysql with enc28j60

Setelah itu jangan lupa terlebih dahulu pilih Use the following IP Address untuk bisa mengedit ip address, isi IP address dengan 192.168.1.n dan Subnet mask 255.255.255.0, untuk n bisa diganti dengan angka 1 sampai 255 kecuali 203 karena kalau kita ingat-ingat 203 adalah alamat server yang terdapat pada source code arduino diatas, ketikkan alamat server(192.168.1.203) pada url browser sobat.

Send data to mysql with enc28j60

Jika berhasil maka akan tampil seperti gambar diatas, selanjutnya kita akan membahas pembuatan databasenya, dari source code rbbb_server di modifikasi lagi dan digabung dengan sensor-sensor lainnya menjadi seperti gambar dibawah ini.

Source code diatas cukup panjang, tetapi karena kita membahas databasenya saja maka kita akan membahas pada function homepagenya saja.

Send data to mysql with enc28j60


Jika sobat pernah belajar html, javascript pasti akan lebih banyak mengerti dari source code yang ditampilkan diatas, jika belum mohon maaf di tutorial ini kita tidak akan menjelaskannya secara lengkap.

Dari gambar yang ditampilkan terlihat bahwa ada nilai yang sudah saya tandai yaitu a, b, dan nilaiLDR. Jika sobat sudah belajar bahasa pemograman c++ maka akan mengetahui aturan pengisian ini, $D adalah tanda untuk variable bilangan bulat yang akan dimasukkan/ditampilkan sedangkan untuk variable yang akan digunakan akan di kenalkan diakhirnya.

Aturan pengenalan variable sama dengan c++ yaitu dengan menyusunnya sesuai urutan, jika dilihat pada gambar dan source code dibaca dari kiri kekanan maka urutan yg saya beri tanda(warna merah) sesuai dengan urutan variable pada akhir code string html. Sekarang terserah sobat memodifikasi html dan variable yang diperlukan pada project sobat masing-masing.

CATATAN
Sebelum melanjutkan ke penjelasan selanjutnya, sebaiknya sobat menghidupkan XAMPP Apache dan Mysql terlebih dahulu, karena semua source code dibawah ini akan diakses melalui media server. dan semua file source code harus diletakkan pada xampp->htcdocs.

Send data to mysql with enc28j60

Selanjutnya kita akan membahas metode input data ke database yang saya gunakan yaitu menggunakan javascript, dari gambar sebelumnya telah terdapat "<script src="http://localhost/mikro/database.js"></script>" yang memanggil script yang terlihat dibawah ini .

Send data to mysql with enc28j60

Dalam pemograman web, metode diatas bernama ajax(Asynchronous JavaScript and XMLHTTP) yang berfungsi untuk mengambil/mengirim data ke suatu halaman web yang berbeda tanpa melakukan reload page. Untuk memakai source code ajax ini saya menggunakan jquery, jadi jika sobat memakai source code diatas sebagai referensi jangan lupa juga menyertakan script jquerynya juga.
Membahas sedikit tentang source code diatas

  • $(‘.temp’) = menunjuk class temp pada html.
  • data(‘suhu’)= mengambil data data-suhu pada html
  • url: "http://localhost/mikro/index3.php= alamat halaman yang ingin dikirimkan data.
  • ‘temp’ : e=data yang dikirim ke halaman lain, an nanti bida diakses dalam bentuk indeks array.

Cara kerja secara singkat adalah, setiap meload halaman maka script pada gambar diatas akan dijalankan, supaya berjalan sesuai rencana maka script harus diletakkan pada bagian bawah body agar saat script dijalankan bagian body yang ada diatasnya(yaitu berupa data) sudah terload dan bisa diambil datanya.

Url pada javascript ajax diatas menuju file index3.php maka kita kan membahasnnya sekarang, source code index3.php terlihat seperti gambar dibawah ini.

Send data to mysql with enc28j60

Langsung saja saya akan membahas sedikit bagian source code index3.php.

  • date_default_timezone_set berguna untuk mengatur waktu lokal ke asia/jakarta.
  • $tem=$_POST["temp"] = seperti yang sudah kita ketahui pada penjelasan bagian script ajax diatas, kita mengirim data dengan nama ’temp’ dengan type POST maka kita bisa mengambil nilainya dengan PHP dengan cara ini. 

Sampai sini kita sudah belajar bagaimana menyimpan data dari adruino ->ENC28J60-> database Mysql (laptop), sekarang kita akan belajar lagi untuk mengambil data dan menampilkannya dalam bentuk graphic dilayar, sobat bisa lihat tampilan akhirnya seperti gambar dibawah ini.

Send data to mysql with enc28j60

Dalam pengambilan data dari database saya membutuhkan 2 file php yang masing-masing bertugas mengambil data dari tabel yang berbeda, 1 file html, dan 1 file javascript, source code php yang pertama bisa dilihat pada gambar dibawah ini.

Send data to mysql with enc28j60

Penjelasan singkat source code:

  • Baris 3 bertujuan untuk menginialisasi sebuah variable bertipe array;
  • Pada baris 9 merupakan query yang bertujuan mengambil data berdasarkan tanggal dibuat dengan aturan data yang terbaru terlebih dahulu dan dibatasi hanya 122 data saja.
  • Baris 12-14 mengisi array dengan data-data yang sudah kita dapatkan dari hasil eksekusi query baris 9.
  • Baris 15 echo disini nantinya berfungsi sama dengan return yaitu mengembalikan nilai saat file php ini dipanggil, untuk memastikannya sobat bisa ganti echo dengan return, dan lihat hasilnya(saya belum coba).

Source code php yang kedua.

Send data to mysql with enc28j60

Karena hampir sama dengan sebelumnya jadi sepertinya tidak ada yang perlu dijelaskan lagi dari source code diatas, mari kita lanjutkan lagi dengan file javascript yang bertugas menampilkan grafik monitoring di browser.


Javascript diatas terlihat begitu panjang jadi saya akan membahas intinya saja, kode diatas bertujuan mengambil data bukan mengirim, ada 2 pengambilan data disana, karena kita sebelumnya membuat 2 file php, jadi pengambilan datanya juga 2 kali(dengan ajax). pengambilan data yang kedua berjalan saat pengambilan data yang pertama success terlihat dengan ditaruhnya ajax yg kedua didalam kurung kurawal { } success ajax pertama. 

Pada javascript ini fungsi akan dijalankan pada setiap 1000ms/1 detik sekali dengan cara menaruh fungsi-fungsi di dalam fungsi setInterval, yang bertujuan agar grafik yang ditampilkan selalu realtime/berjalan tanpa harus meload halaman, source code untuk menampilkan grafik tersebut ada pada success ajax yang kedua dan berakhir saat grafik di render pada baris 80, plugin grafik yang saya gunakan disini adalah canvasJS yang dokumentasinya bisa sobat baca disini.


Selesai sudah artikel cara membuat database dengan Ethernet Shield ENC28J60, mohon maaf karena artikelnya dirasa kurang begitu menjelaskan secara rinci source codenya, selain alasan saya malas menulisnya, ini bertujuan agar sobat bisa mengidentifikasi sendiri referensi source code yang saya berikan, harapan saya bisa memodifikasinya menjadi algoritma lain yang lebih baik lagi, dan jika berhasil jangan lupa berbagilah di kolom komentar agar semua orang yang memerlukan bisa terbantu. Sekian terima kasih...