Subscribe Us

header ads

Bài 2: Tự Học ESP8266 Tự Tạo 1 Trang Web Cơ Bản Với HTML Và Esp8266

Khoai Lang Nướng tháng 2 21, 2020

HTML Làm Nhiệm Vụ Gì Trong Lập Trình Với ESP8266.

HTML Nó giúp ESP8266 tạo ra cấu trúc các thành phần trong trang web do esp8266 gửi lên. Để cho các trình duyệt có thể đọc được

Vậy Cấu Trúc Của 1 File HTML Trong ESP8266

Đầu tiên Mình sẽ tạo ra một mẫu file chứa cấu trúc cơ bản của 1 file HTML mà trinh duyệt web có thể đọc được.
chú ý file này mọi người tải Sublime Text về cài Đặt và mở Sublime Lên Nhá
Mở Sublime Text ra và sao chép mã dưới đây rồi dán vào Sublime Text nhá.
Có cái hình mô tả cho dễ hình dung nhá, nhìn màu mè gọn gàng khá đẹp mắt
Cấu Trúc HTML Cho Esp8266

Chương Trình Web Cơ Bản


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Trợ Lý Học Tập</title>
    <script>

    </script>

    <style>

    </style>
</head>
    <body>
        <h1>Trợ Lý Học Tập</h1>
        <h2>Trợ Lý Học Tập</h2>
        <h6>Trợ Lý Học Tập</h6>
        <p>Trợ Lý Học Tập</p>
        <i>Trợ Lý Học Tập</i>
        <b>Trợ Lý Học Tập</b>
        <u>Trợ Lý Học Tập</u>
        <br>
        <p>đây là  thẻ p <i>bên trong có thẻ i</i> <b>và thẻ b</b> <u>cả thẻ u nữa</u></p>
        <br>
        <font color='FF0000'>Trợ Lý Học Tập ==> màu đỏ</font><br>
        <font color='00FF00'>Trợ Lý Học Tập ==> màu lục</font><br>
        <font color='0000FF'>Trợ Lý Học Tập ==> màu lam</font><br>
        <br>
        <button>Nút Nhấn</button>
        <div class="ctn">
         <p>thẻ input</p>
         <br>
         <input type="text" name="id" class="f-i" value="Trợ Lý Học Tập">
         <br>
         <input type="password" name="pass" class="f-i" value="password">
     </div>
        <br>
        <br>
        <form action="https://trolyhoctap.blogspot.com/">
            <input type="submit" value="Chuyen Trang">
        </form>
        <hr>
    </body>
</html>

Mình Giải Thích Chương Trình nhá


<meta charset="UTF-8">
dùng để khai báo bộ ký tự được sử dụng cho trang web hiển thị nội dung cho chính sác. Dùng thẻ này sẽ hiể thị tiếng việt tốt hơn.

<title>Trợ Lý Bài Giảng</title>
Thẻ title khai bao tiêu đề trang ở đây là trợ lý bài giảng

<script>
Thẻ khai bao cho javascript

<style>
Thẻ để khao báo css cho trang web

<body>
Thẻ này dùng để viết tất cả nội dung trang web của bạn

Các thẻ cớ bản dùng trong HTML


<h1> nội dung</h1>
Thẻ h để xác đinh tiêu đề. Gồm 6 loại thẻ H1 đến H6, có kích thước chữ tư to đến bé khac nhau

<p> nội dung</p>
Thẻ dùng để viết văn bản xuống dòng sau khi đóng thẻ

<i> nội dung</i>
Nội dung trong thẻ sẽ in nghiêng

<b> nội dung</b>
Nội dung trong thẻ sẽ in đâm

<u> nội dung</u>
Nội dung trong thẻ sẽ gạch chân

<br>
Thẻ dùng để xuống dòng

<font color =”mã màu”>nội dung<font>
Thẻ tạo màu cho nội dung bên trong thẻ

<button>tên nút</button>
Thẻ tạo ra 1 nút nhấn

<div>
Thẻ div là cái thẻ mà nó là chữ viết tắt của division (nghĩa là khu trong tiếng Việt theo từ điển kỹ thuật chung) được sử dụng để tạo ra một khu vực kiểu block nào đó trên một website, hay bạn có thể hiểu là gom nhóm tập hợp các phần tử trên website vào một khu vực với thẻ <div>.

<input>
Thẻ chứa nội dung nhập vao từ bàn phím.

Các Kiểu INPUT Trong HTML

<input type=”text”> sử dụng cho nhập dữ liệu đầu vào cho đầu vào dạng văn bản (một dòng):
<input type=”password”> định nghĩa một trường password:
<input type=”submit”> định nghĩa một nút để gửi dữ liệu từ form người sử dụng nhập tới nơi xử lý dữ liệu của form này (form-handler)
<input type=”radio”> định nghĩa một nút  radio. Các nút Radio cho phép người sử dụng chọn duy nhất một lựa chọn trong danh sách các lựa chọn:
<input type=”checkbox”> định nghĩa một nút checkbox. Checkboxes cho phép người sử dụng chọn không hoặc nhiều lựa chọn trong các lựa chọn đưa ra.
Thẻ <input type=”number”> được sử dụng cho trường dữ liệu đầu vào có chứa các giá trị là số.
Đây là những thẻ chúng ta sẽ dùng trong bài giảng này

<form>

Thẻ thu tập nội dung và gửi nó đến trang yêu cầu

<input type="submit">
Nút nhận để gửi đi

<hr>
Thẻ tạo 1 đường thẳng ngang

Tạo 1 trang web cơ bản với esp8266

Để có thể đưa chương trình HTML vào chương trình trên Arduino IDE thì các bạn phải chuyển chương trình HTML thành một kiểu dữ liệu trên arduino IDE. Esp8266 sẽ gửi kiểu dữ liệu này cho các trình duyệt web(client) thành một file HTML mà Trình duyệt web có thể đọc được
Ở đây mình sẽ chuyển thành kiểu String Cho dễ sử lý.
Khi chuyển thành kiểu String. Các bạn nên để tất cả trong cặp dấu nháy kép nhá
Ví Dụ
String Web = “<div>Trợ Lý Học Tập</div>”;
Nếu trong nội dung của chuỗi có dấu nháy kẹp, lúc này chúng ta phải đặt dấu \ trước dấu nháy kép để chuong trình nhận diện dấu nháy kép đó là nội dung
Ví Dụ 

String WEB = “<input type=\"submit\" value=\"Chuyen Trang\">”;

  
/* LEPAN Trợ Lý Học Tập 
 *  Tự học esp 8266
 *  https://trolyhoctap.blogspot.com/
*/
 
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80);


const char* ssid="HomeSmart";       //viết têm wifi muốn truy cập
const char* password="0988474745"; // viết mật khẩu wifi đo

String webSite;



//Trang Chủ


void handleWebsite(){
  
  webSite = "<html lang=\"en\" class=\"\"><head>";
  webSite += "<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1,user-scalable=no\">";
  webSite += "<title>Trợ Lý Học Tập</title>";
  webSite += "<script>";
  webSite += "</script>";
  webSite += "<style>";
  webSite += "</style>";
  webSite += "</head>";
  webSite += "<body>";
  webSite += "<h1>Trợ Lý Bài Giảng</h1>";
  webSite += "<h2>Trợ Lý Bài Giảng</h2>";
  webSite += "<h3>Trợ Lý Bài Giảng</h3>";
  webSite += "<p>Trợ Lý Bài Giảng</p>";
  webSite += "<i>Trợ Lý Bài Giảng</i>";
  webSite += "<b>Trợ Lý Bài Giảng</b>";
  webSite += "<u>Trợ Lý Bài Giảng</u>";
  webSite += "<br>";
  webSite += "<p>đây là  thẻ p <i>bên trong có thẻ i</i> <b>và thẻ b</b> <u>cả thẻ u nữa</u></p>";
  webSite += "<br>";
  webSite += "<font color='FF0000'>Trợ Lý Bài Giảng ==> màu đỏ</font><br>";
  webSite += "<font color='00FF00'>Trợ Lý Bài Giảng ==> màu lục</font><br>";
  webSite += "<font color='0000FF'>Trợ Lý Bài Giảng ==> màu lam</font><br>";
  webSite += "<br>";
  webSite += "<button>Nút Nhấn</button>";
  webSite += "<p>thẻ input</p>";
  webSite += "<input type='text' placeholder='trọ lý bai giang'>";
  webSite += "<br>";
  webSite += "<input type='text' value ='trọ lý bai giang'>";
  webSite += "<br>";
  webSite += "<input type='password' value='12345678'>";
  webSite += "<br>";
  webSite += "<br>";
  webSite += "<form action=\"https://trolyhoctap.blogspot.com/\">";
  webSite += "<input type=\"submit\" value=\"Chuyen Trang\">";
  webSite += "</form>";

  webSite += "<hr>";


  webSite += "</body>";
  webSite += "</html>";
  
  server.send(200,"text/html",webSite);
}


void setup() {
  Serial.begin(9600);  
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid,password);
  while(WiFi.status()!=WL_CONNECTED){
    delay(500);
    Serial.print(".");
  }
  Serial.println("kết nối thành công");
  Serial.print("đã kết nối tới ");
  Serial.println(ssid);
  Serial.print("địa chỉ IP là: ");
  Serial.println(WiFi.localIP());
  server.on("/",handleWebsite);
  
  server.begin();  
}

void loop() {
    server.handleClient();
}

Mở Arduino IDE lên. Sao chẹp code bên dưới vào Arduino ide nhá

Code Cho Esp8266 Trên Arduino IDE

Lưu lai với Arduino IDE sau đó biên dịch chương trình và kiểm tra lỗi nhá
Nạp nó vào ESP8266 hưỡng dẫn nạp
Mở serial monitor lên, lấy địa chỉ IP của esp8266
Cửa Sổ Srrial Monitor


Sau đó mở trình duyệt lên và truy cập vào địa chỉ ip trên và thưởng thức.
Mâu Web cơ bản trên ESP8266

Giải thích code trên ardino ide nhá


#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include Khai Báo thư viện cho Arduino ide.

ESP8266WebServer server(80)
Khai Báo cổng 80 để cho máy  chủ (server esp8266) có thể trả lời máy khách (trình duyệt web) trên cổng này. Cổng này là cổng tiêu chuẩn nên để mặc định như vậy.

const char* ssid="Tên wifi"
const char* password="0988474745"
Khai báo tên wifi (ssid) và mật khẩu wiffi (password)

void handleWebsite()
Void là từ khóa dùng khai báo hàm. Khi nó được gọi nó sẽ không trả về giá trị nào

server.send(200,"text/html",webSite)
Gửi thông tin tới máy khách(trình duyệt web) với nội dung có trong website

void setup()
Nơi khai báo các lệnh cài đặt thiết lập các thông số. các lệnh trong void setup chỉ duocjdj chạy 1 lần duy nhất khi khởi động.

Serial.begin(9600)
 Tạo giao tiếp với serial monitor của Arduino với baud 9600

WiFi.mode(WIFI_STA)
Module esp8266 wifi sẽ hoạt động ở chế độ STA chế độ kết nối vào mạng wifi

  
WiFi.begin(ssid,password)
Bắt đầu kết nối với mạng wifi với tên(ssid) và mật khẩu(password)
  
while(WiFi.status()!=WL_CONNECTED){
    delay(500);
    Serial.print(".");
  }
Trong vòng lặp while này. Kiểm tra thấy nếu WiFi.status() khắc với WL_CONNECTED có nghĩa là lúc này esp8266 chưa kết nối ở chế độ STA với mạng wifi ào. Nên sẽ delay 0,5s in ra 1 dấu . và lại kiểm tra lại liên tục như vậy cho tới khi kết nối vào wifi thành công. Lúc này WiFi.status() bằng với WL_CONNECTED thì kết thúc vong lặp while và thực hiện lệnh tiếp theo

Serial.println(WiFi.localIP())
In ra địa chỉ ip của esp8266

server.on("/",handleWebsite)
Khi máy khách(web) gửi một đỉa chỉ tới esp8266(server) thì lúc này sẽ chạy đến chương trình handleWebsite.

server.begin()
khởi tạo cho server 

void loop()
Nơi khai báo cách lệnh sẽ dc chạy liên tục lặp đi lặp lại vô hạn.

server.handleClient()
Quét máy khách cho server

Nếu còn thắc mắc nào mọi người để dưới bình luận nhá.

Tags:

Đăng nhận xét

2 Nhận xét

  1. Nặc danhlúc 20:04 29 tháng 2, 2020

    Xin chào

    Trả lờiXóa
  2. Nặc danhlúc 16:59 14 tháng 2, 2022

    chào ad em có thử nạp nhưng serial monitor không thể kết nối nên k lấy được ip ạ

    Trả lờiXóa