Home
GOOGLE SHEET

STAR RATING SYSTEM ON GOOGLE SHEET

Star Rating System On Google Sheet



ဒါကတော့ blog site မှာ blog post တခုရဲ့အဆင့်ကို user ကကြယ်များဖြင့်အဆင့်သတ်မှတ်ချင်ရင်သတ်မှတ်လို့ရအောင်ဖန်တီးထားတဲ့ Star Rating System ပါ။ထို Star Rating System တခုကို Google Sheet ဖြင့်ဖန်တီးပြသွားမှာဖြစ်ပါတယ်။

စတင်ဖန်တီးရန် အောက်က link ကို copy ယူ၍ Browser မှာဖွင့်ပါ။(မှတ်ချက် → Mobile ဖုန်းဖြင့်တည်ဆောက်ပါက Browser Desktop site သို့ ပြောင်းပါ)

https://docs.google.com/spreadsheets/u/0/
  1. Start a new spreadsheet ➕ ကိုနှိပ်ပါ
  2. Untitled Spreadsheet နေရာမှာ → Project name သတ်မှတ်၍ရေးပါ
  3. Sheet1 ကိုနှိပ် → Rename ကိုနှိပ် → Sheet name သတ်မှတ်၍ရေးပါ(သတိ → စာလုံး(space)မခြားရပါ)
  4. line 1 ကို → Header အဖြစ်သတ်မှတ်ပါ။အောက်ကနမူနာကြည့်၍ရေးပါ
A B C D E F G H I J K L
1 Timestamp Post ID User ID Rating
2
  1. save ဖြစ်တဲ့ထိစောင့်ပါ။

  1. အခုမြင်ရတဲ့ Sheet စာမျက်နှာရဲ့ → link ကို → copy ယူ၍မှတ်သားထားပါ။နောက်တဆင့်တွင်ထို link မှ google sheet project ID ကို ရွေးချယ်၍ထည့်သွင်းရမည်ဖြစ်သည်။
  2. project link ကို copy ယူပြီးသွားပြီဆိုရင် → Extensions ကိုနှိပ်
  3. Apps Script ကိုနှိပ်
  4. code.gs တွင် အောက်က code ကို copy ယူထည့်
const SPREADSHEET_ID = 'Your_Sheet_ID'; 
const SHEET_NAME = 'Your_Sheet_Name'; 
function doGet(e) {
  return ContentService.createTextOutput("Rating App is running. Use POST request.");
}
function doPost(e) {
  const data = e.parameter;
  const output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
 if (data.action === 'get_average') {
    return output.setContent(JSON.stringify(getAverage(data.postId)));
  } else {
    return output.setContent(JSON.stringify(saveRatingToSheet(data)));
  }
}
function saveRatingToSheet(data) {
  try {
    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheet = ss.getSheetByName(SHEET_NAME);
    
    // Column Index: A=0, B=1, C=2, D=3 (Timestamp, Post ID, User ID, Rating)
    const rowData = [
      new Date(),                      // A: Timestamp
      data.postId.toLowerCase(),       // B: Post ID (Case-Insensitive)
      data.userId || 'guest',          // C: User ID
      parseInt(data.rating) || 0       // D: Rating
    ];
    sheet.appendRow(rowData);
    return { status: "success", message: "Rating saved." };

  } catch (error) {
    return { status: "error", message: "GAS Save Error: " + error.toString() };
  }
}
function getAverage(postId) {
  try {
    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheet = ss.getSheetByName(SHEET_NAME);
    const values = sheet.getDataRange().getValues();
    const lowerCasePostId = postId.toLowerCase();
    let totalRating = 0;
    let voteCount = 0;
    for (let i = 1; i < values.length; i++) {
      const row = values[i];
      const rowPostId = row[1]; // B Column: Post ID
      const rating = row[3];    // D Column: Rating
    if (rowPostId && rowPostId.toLowerCase() === lowerCasePostId) {
        totalRating += parseFloat(rating);
        voteCount++;
      }
    }
   let average = (voteCount === 0) ? 0 : (totalRating / voteCount);
    return { status: "success", average: average.toFixed(2), votes: voteCount };
  } catch (error) {
    return { status: "error", message: "GAS Get Average Error: " + error.toString() };
  }
}

  1. Your_Sheet_ID နေရာတွင်ထည့်ရမဲ့ ID သည် အောက်မှာပြထားသလို google sheet project link ထဲကမှ ရွေးချယ်၍ထည့်ရမည်ဖြစ်သည်


  1. Your_Sheet_Name နေရာတွင်မိမိ SheetName ထည့်ပေးပါ

  1. ကိုနှိပ်။save ဖြစ်တဲ့ထိစောင့်ပါ

  1. save ဖြစ်သွားပြီဆို →Deploy ကိုနှိပ်ပါ
  2. New deployment ကိုရွေးပါ
  3. ⚙️ ကိုနှိပ်ပါ။
  4. Web app ကိုရွေးပါ
  5. New description နေရာတွင်မိမိ → sheet name ရေးထည့်ပါ
  6. Execute as နေရာမှာ မိမိ gmail မှန်မမှန်စစ်ပါ
  7. Who has access နေရာတွင် → Anyone ကိုရွေးပါ
  8. Deploy ကိုနှိပ်
  9. Authorize access ကိုနှိပ်
  10. sign in လုပ်ဖို့မိမိ → gmail account ကိုနှိပ်
  11. Advanced ကိုနှိပ်
  12. Go to Untitled project (unsafe). ကိုနှိပ်
  13. Allow ကိုနှိပ်
  14. Web app link ကို → copy ယူ၍မှတ်သားထားပါ။‌အောက်ကပုံကိုကြည့်ပါ။Template တွင်ထည့်သွင်းအသုံးပြုရမည်ဖြစ်သည်


  1. dashboard ထဲက Theme ကိုနှိပ်
  2. HTML🔻ကိုနှိပ်
  3. <data.post.body/> ရှာပါ(သတိ - template တခုနှင့်တစ်ခုမတူသဖြင့် <data.post.body/> သည်တခုထက်ပို၍ရှိနိုင်သည်။နောက်ဆုံး <data.post.body/> အောက်တွင် အောက်က code ကို copy ယူ၍ထည့်ပါ

<div id='starRating'/>
<div id='ratingText' style='text-align:center; font-weight:bold; margin-top:10px;'>Loading...</div>

  1. </body>ရှာပါ။တွေ့ပြီဆိုရင်အောက်က css & js code ကို copy ယူ၍အဲဒီ</body> အပေါ်ကနေထည့်ပါ။

<style>
#starRating {display: flex;justify-content: center;align-items: center;cursor: pointer;margin-bottom: 10px;}
.star-image {width: 30px; height: 30px;background-size: cover;display: inline-block;margin: 0 2px;image-rendering: -webkit-optimize-contrast;}
</style>
<script>
//<![CDATA[
const sheetURL = "Your_Web_App_Link_Here"; 
const starCount = 5;
let lastClickedRating = 0; 
let currentAvgRating = 0;
let userId = localStorage.getItem("userId");
if(!userId){
    userId = "user_" + Math.random().toString(36).substr(2, 9);
    localStorage.setItem("userId", userId);
}
let POST_URL_FULL = window.location.href;
if (POST_URL_FULL.indexOf("?") > -1) { 
    POST_URL_FULL = POST_URL_FULL.substring(0, POST_URL_FULL.indexOf("?"));
}
const postId = encodeURIComponent(POST_URL_FULL).toLowerCase();
function renderStars() {
    const container = document.getElementById("starRating");
    if (!container) return;
    container.innerHTML = "";
    for(let i=1;i<=starCount;i++){
        const star = document.createElement("img");
       star.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIoe4JlpS7IXKd_7JWq-Z8iuG_d24Z6Jk9lQxtdI_Q16nSIr3CXlZY_d_-I5yViR8jr_HlBPw2rLAD4iB5_RonNPeFTYX9YUr_c9FPheGWS3Yt5Q0HOaVK2OFK2rqAOfLlosMDREk9J7o/s1600/srs1.png";
        star.classList.add("star-image");
        star.dataset.value = i;
      star.addEventListener("mouseover", () => highlightStars(i, false));
star.addEventListener("mouseout", () => highlightStars(lastClickedRating || currentAvgRating, true));
        star.addEventListener("click", () => saveRating(i));
        container.appendChild(star);
    }
}
function highlightStars(rating, isMouseOut = false){
    const stars = document.getElementById("starRating") ? document.getElementById("starRating").children : [];
    if (isMouseOut , rating === 0) return; 
for(let i=0;i<stars.length;i++){
        stars[i].src = (i<rating)
            ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQOzXM_msysnCUG8KPm4gK-5kMtViW-ceTbbG2FTpQK6SpbyLQGgnDVFgl02cBHZ7uUhLF8e8RL4HRgus7f6rB8SO1TBU_o2ctbAurdStU6Fu76foyPZdn1WtFRK41mILW6E3eNskYII/s1600/srs3.png"
            : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIoe4JlpS7IXKd_7JWq-Z8iuG_d24Z6Jk9lQxtdI_Q16nSIr3CXlZY_d_-I5yViR8jr_HlBPw2rLAD4iB5_RonNPeFTYX9YUr_c9FPheGWS3Yt5Q0HOaVK2OFK2rqAOfLlosMDREk9J7o/s1600/srs1.png";
    }
}
function saveRating(rating){
    lastClickedRating = rating;
    highlightStars(rating);
    const data = new URLSearchParams({ 
        postId: postId,  
        userId: userId,  
        rating: rating  
    });
document.getElementById("ratingText").innerText = "Submitting...";
  fetch(sheetURL, {
        method:"POST",
        body: data
    })
    .then(res => res.json())
    .then(resp => {
        if(resp.status=="success"){
document.getElementById("ratingText").innerText = "Thanks for voting!";
            getAverageRating();
        } else {
document.getElementById("ratingText").innerText = "Error: " + (resp.message || "Unknown error");
        }
    })
.catch(err => {
document.getElementById("ratingText").innerText = "Error: Connection failed.";
    });
}
function getAverageRating(){
    const data = new URLSearchParams({ postId: postId, action: 'get_average' });
fetch(sheetURL, {
        method:"POST",
        body: data
    })
    .then(res => res.json())
    .then(resp => {
        if(resp.status=="success" , resp.average!==undefined){
            currentAvgRating = Math.round(parseFloat(resp.average));
            highlightStars(currentAvgRating); 
            let text = `Average: ${parseFloat(resp.average).toFixed(1)}/5 (${resp.votes} votes)`;
document.getElementById("ratingText").innerText = text;
          } else {
highlightStars(lastClickedRating);
document.getElementById("ratingText").innerText = "Be the first to rate!";
        }
    })
    .catch(err => {
document.getElementById("ratingText").innerText = "Could not load average.";
    });
}
window.onload = function() {
    renderStars();
    getAverageRating();
};
//]]>
</script>

  1. Your_Web_App_Link_Here‌ နေရာမှာမိမိ Web App Link ဖြင့်အစားထိုးပါ။
  2. save ကိုနှိပ်ပြီးပြီ

Post a Comment