Google sheet Apps script Webapp | Data entry form – Ứng dụng tạo Form thu thập CCCD có upload 2 file
Tiếp tục trong seri chia sẻ về google sheet, apps script, webapp là một project “Data entry form – Ứng dụng tạo Form thu thập CCCD có upload 2 file”. Đây là một project có tính ứng dụng trong thực tế: bạn dùng form này thu thập thông tin, có upload các loại giấy tờ mà cần cả hai mặt (mặt trước, mặt sau). Dưới đây là mã code và video hướng dẫn cụ thể.
Để tìm thêm nhiều project apps script, bạn truy cập ở đây
Các project hiển thị ngẫu nhiên:
- VBA Excel Xây dựng hàm chuyển chuỗi có dấu thành không dấu, khoản trắng thành dấu –
- Google sheet Webapp | Lấy dữ liệu trên Sheet hiển thị dạng Bảng có phân trang trùy chọn trên website
- Web App Script | Trang trắc nghiệm online hỗ trợ hình ảnh, lưu file kết quả – Form nhập bộ câu hỏi
- Google sheet Webapp Quản lý Lịch dạy học giáo viên trong trung tâm-Lọc theo Tên-Lớp-Khung giờ -Môn
- Google sheet webapp | CRUD FORM – ĐIỀN THÔNG TIN TỪ FORM VÀO TEMPLATE GOOGLE DOC, KÈM HÌNH ẢNH 1
- Google sheet webapp | Dropdown phụ thuộc – Truy xuất Spreadsheet và các Sheet phụ thuộc từ Folder
- Tạo hóa đơn trên Google sheet – Gửi email đính kèm hóa đơn pdf – Quản lý url hóa đơn trên danh sách
- Google sheet Ứng dụng theo dõi đơn hàng – Danh sách sản phẩm mua, trạng thái đơn hàng
- Tip on Ms Word Hướng dẫn tạo ngắt trang, xóa ngắt trang đơn lẽ hoặc toàn bộ ngắt trang trên file doc
- Google sheet | Generate QR Codes – Mã hóa nội dung Cell – Thêm hình ở giữa mã QR code
Mã trang “Code.gs”
function doGet() {
var output = HtmlService.createTemplateFromFile('Index');
return output.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
/**
* Include function to include HTML, CSS, and JavaScript files.
*/
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
/*** Save All Data In Google Sheet */
function submitFromData(name, gender, dob, file1Data, file2Data) {
try {
var folder = DriveApp.getFolderById("Paste your Id folder");
var file1Blob = null;
var file2Blob = null;
var file1 = null;
var file2 = null;
if(file1Data){
var decodeFile1Data = Utilities.base64Decode(file1Data,Utilities.Charset.UTF_8);
file1Blob = Utilities.newBlob(decodeFile1Data, 'application/octet-stream', name + '_Mat_truoc_'+ new Date().getTime());
}
if(file2Data){
var decodeFile2Data = Utilities.base64Decode(file2Data,Utilities.Charset.UTF_8);
file2Blob = Utilities.newBlob(decodeFile2Data, 'application/octet-stream', name + '_Mat_sau_'+ new Date().getTime());
}
/**Save file in drive folder */
if(file1Blob && file1Blob.getBytes().length > 0){
file1 = folder.createFile(file1Blob)
}
if(file2Blob && file2Blob.getBytes().length > 0){
file2 = folder.createFile(file2Blob)
}
var timestamp = new Date().toLocaleDateString('vi-VN');
var ss = SpreadsheetApp.openById("Paste your Id spreadsheet");
var sheet = ss.getSheetByName("Data");
var rowData = [timestamp, name, gender,dob,
file1 ? file1.getUrl() : '',
file2 ? file2.getUrl() : ''
]
console.log(rowData)
sheet.appendRow(rowData)
return true;
} catch (e) {
console.log(e)
}
}
Mã trang “Index.html”
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('style'); ?>
<?!= include('JavaScript'); ?>
</head>
<body>
<br>
<div class="container w3-card-4" style="background-color:#04aa6d;text-align:center; font-size:25px;font-weight:bold; color: #ffffff; padding: 10px; border-radius: 0px;border: 0px solid #04aa6d; width:500px ">THU THẬP THÔNG TIN</div>
<div class="container w3-card-4" style="padding:20px; border-radius: 0px 0px 10px 10px;border: 1px solid #04aa6d; width:500px ">
<div>
<div class="form-check-inline">
<label style="font-weight: bold;" for="name" class="form-label">Họ và tên</label>
<input style="width: 150px" type="text" id="name" name="name" class="form-control form-control-sm" placeholder="Họ và tên" required>
</div>
<div class="form-check-inline">
<label style="font-weight: bold;" for="gender" class="form-label">Giới tính</label>
<select style="width: 100px" id="gender" name="gender" class="form-select form-select-sm" required>
<option value="">-Chọn-</option>
<option value="Nam">Nam</option>
<option value="Nữ">Nữ</option>
</select>
</div>
<div class="form-check-inline">
<label style="font-weight: bold;" for="dob" class="form-label">Năm sinh</label>
<input style="width: 150px" type="date" id="dob" name="dob" class="form-control form-control-sm" placeholder="Họ và tên" required>
</div>
</div>
<div style="height:10px"></div>
<p>
<label class="w3-text-blue" style="font-weight:bold" for="photo_front">Ảnh CCCD Mặt trước</label>
<input class="w3-input w3-border" type="file" id="photo_front">
</p>
<p>
<label class="w3-text-blue" style="font-weight:bold" for="photo_back">Ảnh CCCD Mặt sau</label>
<input class="w3-input w3-border" type="file" id="photo_back">
</p>
<button class="w3-btn w3-blue" id="btn" onclick="submit()">Submit</button>
</div>
<div style="height: 10px;"></div>
<div class="text-center"><a href="https://www.youtube.com/@netmediacctv" target="_blank"><i style="color:red; font-size:20px" class="bi-youtube"></i></a> <a href="https://www.facebook.com/giaoanppt" target="_blank"><i style="color:blue ;font-size:20px" class="bi-facebook"></i></i></a></div><center style="font-size:12px;"><a style="color:gray;text-decoration:none" href="https://giaoan.link" target="_blank"> Website: giaoan.link<a/> © 2024 Landing page</center></div>
<script>
document.getElementById("btn").addEventListener("click", (event) => {
setTimeout(function() {
event.preventDefault()
document.getElementById("name").value =""
document.getElementById("gender").value =""
document.getElementById("dob").value =""
document.getElementById("photo_front").value =""
document.getElementById("photo_back").value =""
}, 3000);
})
</script>
</body>
</html>Mã trang “Javascript.html”
<script>
function submit(){
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
var dob = document.getElementById("dob").value;
var photo_front = document.getElementById("photo_front");
var photo_back = document.getElementById("photo_back");
var file1Data = null;
var file2Data = null;
var file3Data = null;
if(name === "" || gender === "" || dob === ""){
alert("Vui lòng điền đủ thông tin trước khi gửi!");
return;
}
if(photo_front.files.length > 0){
var file1Blob = photo_front.files[0];
var reader1 = new FileReader();
reader1.onload = function(event){
file1Data = event.target.result.split(',')[1];
processFile2()
}
reader1.readAsDataURL(file1Blob);
}else{
processFile2()
}
function processFile2(){
if(photo_back.files.length > 0){
var file2Blob = photo_back.files[0];
var reader2 = new FileReader();
reader2.onload = function(event){
file2Data = event.target.result.split(',')[1];
submitData()
}
reader2.readAsDataURL(file2Blob);
}else{
submitData()
}
}
function submitData(){
google.script.run.withSuccessHandler(function(res){
if(res = true){
alert("Dữ liệu được gửi thành công!")
}else{
alert("Dữ liệu gửi thất bại!")
}
}).submitFromData(name, gender, dob, file1Data, file2Data) ;
}
}
</script>
Mã trang “style.html”
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">