Google Apps script, html Tạo form tìm kiếm kết quả học tập sinh viên đơn giản
Giaoan.link chia sẻ đến các bạn project Google Apps script, html Tạo form tìm kiếm kết quả học tập sinh viên đơn giản. Trong ví dụ này mình sử dụng dịch vụ đám mây google sheet và kết hợp với html cũng như mã apps script để tạo một tiện ích tìm kiếm kết quả của sinh viên trên môi trường mạng rất dễ dàng. Các bạn có thể sử dụng ví dụ này để tùy biến theo nhiều mục đích khác nhau.
Các bài tập excel ứng dụng khác:
- Google sheet webapp|Nhập liệu-Quản lý khách hàng – Click tên hiển thị popup thông tin thêm – Print
- Google sheet webapp | Multi Load table data từ google sheet lên web và frezee header of table.
- HTML WEBAPP CSS -Mô phỏng hệ mặt trời -Trái đất -Mặt trăng đơn giản trên nền vũ trụ đen sao lấp lánh
- Google sheet Webapp Script | Tìm kiếm, lọc và In chi tiết thông tin sản phẩm của mã Khách hàng
- Google sheet Apps script | Data Entry Popup From – Thêm mới – Chỉnh sửa – Xóa
- Google sheet Webapp Script | Quản lý đặt xe cho chuyến đi – Tài xế cập nhật hoàn thành thông tin
- Apps script Webapp | Lấy giá trị Input hiển thị lên – Web Get value input field display on web
- Google sheet Apps script | Todo List and Send mail – Tạo danh sách nhắc việc và gửi mail
- Web App Script | Bộ Icon CSS Rất dễ lập trình cho giao diện webapp
- Google sheet Webapp | Project Quản lý khách hàng – Cập nhật tiến độ sửa chữa
Mã trên file Code.gs
function doGet(e){
return HtmlService.createHtmlOutputFromFile('Index.html')
}
function submitData(obj){
var ws=SpreadsheetApp.openById("1ISHx-xbXxu2b2Az-R8xM22XYR_UNrjTY4rBTFVY8pfs");
var ss=ws.getSheetByName("Data");
var flag = 1;
var lr=ss.getLastRow();
for(var i=2;i<=lr;i++){
var vId=ss.getRange(i,1).getValue();
if(vId==obj){
flag=0;
let b1= ss.getRange(i,2).getValue();
let b2= ss.getRange(i,3).getValue();
let b3= ss.getRange(i,4).getValue();
let b4= ss.getRange(i,5).getValue();
let b5= ss.getRange(i,6).getValue();
var data="<table>"
+"<tr>"
+"<th> MÃ SINH VIÊN </th><th> HỌ VÀ TÊN </th><th> LỚP </th> <th>MÔN TOÁN </th><th> Môn Lý</th><th>Môn Hóa</th>"
+"</tr> "
+"<tr>"
+"<td>"+obj+"</td><td>"+b1+"</td><td>"+b2+"</td><td>"+b3+"</td><td>"+b4+"</td><td>"+b5+"</td>"
+"</tr> </table>";
return data;
}
}
if (flag==1){
var data = "<span style = 'font-size:1.5em; color:red'>KHÔNG TỒN TẠI MÃ SINH VIÊN NÀY NÀY!</span>";
return data;
}
};
Mã trên file Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
table{
align: middle;
font-family: times;
border-collapse: collapse;
width: 50%;
}
td{
border: 1px solid #000000;
text-align: center;
padding: 8px;
}
th{
border: 1px solid #000000;
background-color: yellow;
text-align: center;
padding: 8px;
}
tr:nth-child(even){
background-color: #dddddd;
}
</style>
</head>
<body>
<p class="h4 mb-4 text-center" style="color: blue;">TÌM KẾT QUẢ HỌC TẬP CỦA SINH VIÊN</p>
<form align="center">
<div class="mb-1">
<div class="form-check form-check-inline">
<label style="font-weight: bold;" for="id" class="form-label">MÃ SINH VIÊN:</label>
</div>
<div class="form-check form-check-inline">
<input type="text" id="id" name="id" class="form-control form-control-sm" placeholder="Điền mã sinh viên" required>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="info()">Lấy thông tin</button>
</form>
<hr>
<div align="center" id="result"></div>
<script>
function info(){
let msv= document.querySelector('#id').value;
let updateLocation = document.querySelector('#result');
updateLocation.innerHTML = "Đang lấy dữ liệu...";
function onFailure(error){
let warning = "<span style='color:red'>"+error+"</span>";
updateLocation.innerHTML=warning;
};
function onSuccess(response){
let result = "<span style='color: black'>"+response+"</span>";
updateLocation.innerHTML=result;
};
google.script.run.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.submitData(msv);
};
</script>
</body>
</html>