
CÁC VÍ DỤ LẬP TRÌNH RASPBERRY PI PICO WIRELESS VỚI MICROPYTHON
Xem thêm...
Time: 20:39 23/03/2024 | Cao Văn Vinh
---------------------------------
Ở bài viết ngày hôm nay, mình sẽ giới thiệu một kỹ thuật liên kết giữa HTML Form với Google Sheet bằng một đoạn JS nhỏ. Dưới đây là một video demo để các bạn hiểu vấn đề mình đang trình bày
Như trên clip, bạn dễ dàng hình dung rằng. Khi bạn nhập thông tin vào một form được thiết kế trên Web với HTML, dữ liệu này sẽ được gửi sang Google Sheet. Hiện tại, rất nhiều trang web chọn cách là gửi data này về cho CSDL như phpMyAdmin chẳng hạn. Tuy nhiên, cách làm mới này của mình sẽ là một cách làm mới mẻ hơn, dễ dàng quản lý và không cần dùng tới PHP,C#,... để link với CSDL. Bạn cũng có thể tích hợp cả hai chức năng này, vừa gửi về CSDL, vừa gửi lên Google Sheet!
OK, bắt đầu thôi. Đầu tiên mình có một Form HTML như sau:
<body>
<form>
<h2>Thong tin lien he
<input placeholder="Ho va ten" id="name"/>
<input placeholder="SDT" type="tel" id="phone"/>
<textarea placeholder="ND can tu van" id="content">
<button id="submit">Gui
</form>
</body>
Đây là một form HTML đơn giản, bao gồm 4 thành phần chính là Họ Tên, SDT, Nội dung và một nút để gửi đi. Form rất đơn giản nên mình không có gì để bàn!
Tiếp theo, mình vào trình duyệt, tạo một form Google như sau:
Ở đây, mình cũng tạo 3 ô tương tự bên google form, cũng lần lượt giống Form HTML luôn. Sau đó bạn nhấn Ctrl + Shift + N rồi vào cái form mà chính bạn đã tạo. Mục đích ở đây là kiểm tra xem ở chế độ ẩn danh thì mọi người có vào cái form của bạn được không. Nếu không được thì bạn kiểm tra đã chia sẻ quyền hay chưa.
Bây giờ, bạn tiến hành code để gửi dữ liệu từ Form HTML sang Google Sheet thôi! Các bạn có thể code JS trực tiếp trên HTML hoặc tạo một file .js rồi add vào. Như mình thì code với thẻ script
document.addEventListener("DOMContentLoaded",() => {
const name = document.getElementById("name");
const phone = document.getElementById("phone");
const content = document.getElementById("content");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
const data = {
name: name.value,
phone: phone.value,
content: content.value,
};
postGoogle(data);
});
async function postGoogle(data){
const fomrURL =
"https://docs.google.com/forms/d/e/1FAIpQLSdxHAp0oE0_gLSF63L9EajUV-xMWEtV4zBB5XS6OO52ArhQ8Q/formResponse";
const formData = new FormData();
formData.append("entry.244717613", data.name);
formData.append("entry.211756531", data.phone);
formData.append("entry.2051417840", data.content);
await fetch(fomrURL, {
method: "POST",
body: formData,
}
);
}
}
);
Đầu tiên mình gọi một sự kiện từ cú nhấp chuột khi nhấn vào nút submit! Các dữ liệu đuợc gán vào các biến tương ứng, với hàm getElementById, mình lần lượt được các biến tương ứng
Tiếp theo mình đưa 3 biến này vào một mảng data với 3 thành phần, mục đích để mình truyền đi bằng function postGoogle, function này sẽ được mình trình bày ở trên
Function postGoogle với một tham chiếu truyền vào. formURL này ở đây mà có? Để lấy nó, bạn có thể nhập thông tin vào cái form bạn tạo trên Google Form, sau đó nhấn gửi. Lúc này URL sẽ có dạng như trong code của mình
Tiếp theo, mình gọi các formData.append từ data.name, data.phone và data.content, bạn càn thay 3 dòng entry vào. Để lấy dữ liệu này, bạn vào form Google và vào kiểm tra phần từ, nhấn ctrl + F rồi nhập entry. Bạn tìm kiếm 3 dòng entry này, 3 dòng này tương ứng với input là họ và tên, SĐT và nội dung. Lúc này bạn tiến hành thay vào
Sau khi thay những giá trị cần thiết, bạn có thể chạy code trên và tận hưởng thành quả nhé!
Clip hướng dẫn:
Và đừng quên, mình có hỗ trợ code đồ án thuê với các dự án liên quan tới vi xử lý (PIC, Arduino, Rapsberry Pi, ESP32/ESP8266). Hỗ trợ giao tiếp webserver, database. Hỗ trợ truyền dữ liệu không dây như Lora, RF.... Đặc biệt nhận thiết kế xe điều khiển, xe tự hành, xe tránh vật cản,... với giá hạt dẻ. Chi tiết liên hệ 0865700435 hoặc bất kỳ phương tiện nào nha!