การสร้างระบบบัญชีรายรับรายจ่ายด้วย Google Apps Script
Embedded Files
ยอดเงินคงเหลือ (Balance):
ดึงยอดเงินคงเหลือจาก Google Sheet ทุกครั้งที่เปิดหน้าเว็บ
อัปเดตยอดเงินคงเหลือทันทีหลังจากบันทึกข้อมูล
ประสบการณ์ผู้ใช้ (UX):
ข้อมูลจะอัปเดตโดยอัตโนมัติ ไม่ต้องรีเฟรชหน้า
คำอธิบาย (Placeholder และ Note):
เพิ่มข้อความตัวอย่างใน placeholder
เพิ่มข้อความช่วยอธิบายฟอร์ม
แจกโค้ต
หน้า Form.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
.container {
width: 100%;
max-width: 400px;
margin: 20px auto;
background: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 20px;
}
h2 {
text-align: center;
color: #4CAF50;
}
.balance-box {
text-align: center;
padding: 15px;
background-color: #e8f5e9;
border: 1px solid #4CAF50;
border-radius: 4px;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input[type="text"],
input[type="date"],
input[type="number"],
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
#successMessage {
display: none;
color: green;
text-align: center;
margin-top: 10px;
}
.note {
text-align: center;
font-size: 12px;
color: #888;
}
</style>
</head>
<body>
<div class="container">
<h2>ระบบบัญชีรายรับรายจ่าย</h2>
<div class="balance-box">
<h3>ยอดเงินคงเหลือ: <span id="balance">0.00</span> บาท</h3>
</div>
<form onsubmit="handleSubmit(this); return false;">
<label>วันที่:</label>
<input type="date" id="date" required>
<label>รายการ:</label>
<input type="text" id="description" placeholder="ชื่อรายการ เช่น ค่าอาหาร" required>
<label>ประเภท:</label>
<select id="type">
<option value="รายรับ">รายรับ</option>
<option value="รายจ่าย">รายจ่าย</option>
</select>
<label>จำนวนเงิน:</label>
<input type="number" id="amount" placeholder="ระบุจำนวนเงิน เช่น 500" required>
<label>หมายเหตุ:</label>
<input type="text" id="note" placeholder="หมายเหตุเพิ่มเติม (ถ้ามี)">
<input type="submit" value="บันทึก">
</form>
<div id="successMessage">
<strong>บันทึกข้อมูลเรียบร้อย!</strong>
</div>
<div class="note">กรุณากรอกข้อมูลให้ครบถ้วน</div>
</div>
<script>
// ดึงยอดเงินคงเหลือล่าสุดจาก Google Apps Script
function fetchBalance() {
google.script.run.withSuccessHandler(updateBalance).getCurrentBalance();
}
// อัปเดตยอดเงินคงเหลือในหน้าเว็บ
function updateBalance(balance) {
document.getElementById("balance").textContent = balance.toFixed(2);
}
// ฟังก์ชันบันทึกข้อมูล
function handleSubmit(form) {
const date = form.date.value;
const description = form.description.value;
const type = form.type.value;
const amount = parseFloat(form.amount.value);
const note = form.note.value;
// เรียกใช้ฟังก์ชันใน Apps Script
google.script.run
.withSuccessHandler(() => {
showSuccessMessage();
clearForm(form);
fetchBalance(); // อัปเดตยอดเงินคงเหลือหลังบันทึก
})
.addTransaction(date, description, type, amount, note);
}
// แสดงข้อความแจ้งเตือน
function showSuccessMessage() {
const message = document.getElementById("successMessage");
message.style.display = "block";
setTimeout(() => {
message.style.display = "none";
}, 3000); // ซ่อนข้อความหลัง 3 วินาที
}
// ล้างข้อมูลในฟอร์ม
function clearForm(form) {
form.reset();
}
// เรียก fetchBalance เมื่อโหลดหน้า
window.onload = fetchBalance;
</script>
</body>
</html>
ขึ้นตอนการทำ
เรียกใช้ function setupSheet เพื่อสร้างตาราง
หน้า Code.gs
function onOpen() {
createMenu();
}
function createMenu() {
const ui = SpreadsheetApp.getUi();
ui.createMenu("บัญชีรายรับรายจ่าย")
.addItem("เพิ่มรายการใหม่", "showInputForm")
.addItem("รีเซ็ตข้อมูล", "resetSheet")
.addToUi();
}
function showInputForm() {
const html = HtmlService.createHtmlOutputFromFile("Form.html")
.setWidth(600)
.setHeight(600);
SpreadsheetApp.getUi().showModalDialog(html, "เพิ่มรายการใหม่");
}
function doGet() {
return HtmlService.createHtmlOutputFromFile("Form.html")
.setWidth(600)
.setHeight(600);
}
function addTransaction(date, description, type, amount, note) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("บัญชีรายรับรายจ่าย");
const balanceCell = sheet.getRange("F2");
const currentBalance = parseFloat(balanceCell.getValue()) || 0;
const newBalance = type === "รายรับ" ? currentBalance + amount : currentBalance - amount;
balanceCell.setValue(newBalance);
sheet.appendRow([date, description, type, amount, note, newBalance]);
}
function resetSheet() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("บัญชีรายรับรายจ่าย");
sheet.clear();
setupSheet();
}
function setupSheet() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("บัญชีรายรับรายจ่าย") ||
SpreadsheetApp.getActiveSpreadsheet().insertSheet("บัญชีรายรับรายจ่าย");
sheet.clear();
sheet.appendRow(["วันที่", "รายการ", "ประเภท", "จำนวนเงิน", "หมายเหตุ", "ยอดเงินคงเหลือ"]);
sheet.getRange("A1:F1").setFontWeight("bold").setBackground("#f4f4f9");
sheet.getRange("F2").setValue(0).setFontWeight("bold");
}
function getCurrentBalance() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("บัญชีรายรับรายจ่าย");
const balanceCell = sheet.getRange("F2");
return parseFloat(balanceCell.getValue()) || 0;
}
Page updated
Google Sites
Report abuse