H.有線網路W5100實作
請依序完成下列動作
1.將下列實作的程式碼刷入Arduino
2.透過Cat.5.e 網路線連接Arduino與Wifi AP (路由器)
3.電腦瀏覽器連線
[實作1.1] 自行架設網站
本實作可以透過在網址列輸入http://192.168.1.101 的方式顯示
程式碼
#include <SPI.h>
#include <Ethernet.h>
byte mac[] = { 0xF0, 0x7B, 0xCB, 0x4B, 0x7C, 0x9F };
IPAddress ip(192,168,1,101); //你的Server IP
IPAddress subnet(255, 255, 255, 0);
IPAddress gateway(192,168,1, 1);
EthernetServer server(80);
void setup() {
Serial.begin(9600);
Ethernet.begin(mac, ip, gateway, subnet);
server.begin();
}
void loop() {
EthernetClient client = server.available();
Serial.println(Ethernet.localIP());
if (client) {
while (client.connected()) {
if (client.available()) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();
client.println("<h1>CSJH Maker 中山創客</h1>"); //這裡可以修改文字
break;
}
}
delay(1);
client.stop();
}
}
[實作1.2] 自行架設網站(利用Webduino函式庫)
上個例子透過官方函式庫 Ethernet.h ，
在寫入Html語法時很冗長，因此改用Webduino函式庫
本範例使用的Webduino可以將字串(html)透過P(字串命名)存入記憶體中，
減少上個範例中，不斷重複 client.println("html語法");的寫法
本實作可以透過在網址列輸入http://192.168.1.101 的方式顯示
程式碼
#include "SPI.h"
#include "Ethernet.h"
#include "WebServer.h"
static byte mac[] = { 0xF0, 0x7B, 0xCB, 0x4B, 0x7C, 0x9F };
IPAddress ip(192, 168, 1, 101);
IPAddress subnet(255, 255, 255, 0);
IPAddress gateway(192, 168, 1, 1);
WebServer webserver("", 80); // ""空字串代表在首頁的根目錄，80為埠號
P(homePage) =
"<!doctype html>" //此行代表首頁的內容定義，網頁類型為文字
"<html><head><meta charset=\"utf-8\" />" // 此行代表網頁內容編碼用萬國碼UTF-8；引號中的引號，可加/變成 /"
"<title> CSJH Maker 範例 1.2 </title>" // 此處可修改，會在瀏覽器標籤顯示
"</head><body>"
"恭喜你測試成功。" //此處可修改，會出現在瀏覽器的內文
"</body></html>"; //別忘記補上分號
void defaultCmd(WebServer &server, WebServer::ConnectionType type, char *, bool){
server.httpSuccess();
if (type != WebServer::HEAD) {
server.printP(homePage);
}
}
void setup() {
Ethernet.begin(mac, ip, gateway, subnet);
webserver.setDefaultCommand(&defaultCmd); // 處理「首頁」請求
webserver.begin();
}
void loop() {
webserver.processConnection();
}
[實作1.3]包含兩個頁面的Webduino 的網站程式
1.利用P(網頁名)新增一個頁面，
2.新增一個網頁命令 void 網頁命令函式
void faqCmd(WebServer &server, WebServer::ConnectionType type, char *, bool){
server.httpSuccess();
if (type != WebServer::HEAD) {
server.printP(faqPage);
}
}
3.在void setup(){}中新增一個處理請求
webserver.addCommand("faq.html", &faqCmd);
本頁面可以在網址列輸入http://192.168.1.101 的方式顯示
本頁面可以在網址列輸入http://192.168.1.101/faq.html 的方式顯示
程式碼
#include "SPI.h"
#include "Ethernet.h"
#include "WebServer.h"
static byte mac[] = { 0xF0, 0x7B, 0xCB, 0x4B, 0x7C, 0x9F };
IPAddress ip(192, 168, 1, 101);
IPAddress subnet(255, 255, 255, 0);
IPAddress gateway(192, 168, 1, 1);
WebServer webserver("", 80);
P(homePage) =
"<!doctype html>"
"<html><head><meta charset=\"utf-8\" />"
"<title> CSJH Maker 範例 1.2 </title>"
"</head><body>"
"這是微網站的index頁面。"
"</body></html>";
P(faqPage) =
"<!doctype html>"
"<html><head><meta charset=\"utf-8\" />"
"<title> 微網站faq </title>"
"</head><body>"
"這裡是微網站的FAQ頁面"
"</body></html>";
void defaultCmd(WebServer &server, WebServer::ConnectionType type, char *, bool){
server.httpSuccess();
if (type != WebServer::HEAD) {
server.printP(homePage);
}
}
void faqCmd(WebServer &server, WebServer::ConnectionType type, char *, bool){
server.httpSuccess();
if (type != WebServer::HEAD)
{
server.printP(faqPage);
}
}
void setup() {
Ethernet.begin(mac, ip, gateway, subnet);
webserver.setDefaultCommand(&defaultCmd); // 處理「首頁」請求
webserver.addCommand("faq.html", &faqCmd); // 處理「faq」頁面請求
webserver.begin();
}
void loop() {
webserver.processConnection();
}
[實作1.4]自行修改錯誤畫面
在程式碼一開始的標頭檔處，可以修改錯誤訊息
#define WEBDUINO_FAIL_MESSAGE "OH My God~"
#include "SPI.h"
#include "Ethernet.h"
#include "WebServer.h"
以下程式碼與上例相同，故省略~
本頁面可以在網址列輸入http://192.168.1.101/xyz 的方式顯示
也可以放張圖片，讓我們放張夯一點的
#define WEBDUINO_FAIL_MESSAGE "<img src=\"https://assets.iask.tw/attachment/image/58292d1e270389a1038b4568\">"
#include "SPI.h"
#include "Ethernet.h"
#include "WebServer.h"
可以用google 搜尋圖片，再按複製圖片位址來替換即可
完整程式碼
#define WEBDUINO_FAIL_MESSAGE "<img src=\"https://assets.iask.tw/attachment/image/58292d1e270389a1038b4568\">"
#include "SPI.h"
#include "Ethernet.h"
#include "WebServer.h"
static byte mac[] = { 0xF0, 0x7B, 0xCB, 0x4B, 0x7C, 0x9F };
IPAddress ip(192, 168, 1, 101);
IPAddress subnet(255, 255, 255, 0);
IPAddress gateway(192, 168, 1, 1);
WebServer webserver("", 80);
P(homePage) =
"<!doctype html>"
"<html><head><meta charset=\"utf-8\" />"
"<title> CSJH Maker 範例 1.2 </title>"
"</head><body>"
"這是微網站的index頁面。"
"</body></html>";
P(faqPage) =
"<!doctype html>"
"<html><head><meta charset=\"utf-8\" />"
"<title> 微網站faq </title>"
"</head><body>"
"這裡是微網站的FAQ頁面"
"</body></html>";
void defaultCmd(WebServer &server, WebServer::ConnectionType type, char *, bool){
server.httpSuccess();
if (type != WebServer::HEAD) {
server.printP(homePage);
}
}
void faqCmd(WebServer &server, WebServer::ConnectionType type, char *, bool){
server.httpSuccess();
if (type != WebServer::HEAD)
{
server.printP(faqPage);
}
}
void setup() {
Ethernet.begin(mac, ip, gateway, subnet);
webserver.setDefaultCommand(&defaultCmd); // 處理「首頁」請求
webserver.addCommand("faq.html", &faqCmd); // 處理「faq」頁面請求
webserver.begin();
}
void loop() {
webserver.processConnection();
}