[कोई टाइटल नहीं]
सभी दोस्तों का स्वागत करता हूँ फिर से नया हुनर वेबसाइट में। आज मैं आपके लिए लेकर आया हूँ, रिजल्ट फाइंडर सिस्टम। अगर आप किसी स्कूल या कॉचिंग के लिए एक ऐसा सिस्टम चाहते है। जिससे छात्र/छात्राएं खुद अपना रिजल्ट घर बैठे अपने फोन या लेपटॉप से देख सकें। तो आप बिल्कुल सही जगह आ चुकें है। अगर आप कभी तक गूगल पर यह सर्च कर रहे है-
- Google Sheets + Apps Script से Result Finder कैसे बनाएं | Blogger के लिए पूरा Guide
- Result Finder System बनाएं Google Sheet और Apps Script से (Step-by-Step Hindi Guide)
- School/Coaching Result Finder कैसे बनाएं Google Sheets & Apps Script से
- Blogger के लिए Online Result Finder बनाएं – Google Sheet + Apps Script
- Free में Result Finder Website बनाएं Google Sheets से | Complete Tutorial
📑 Table of Contents
बिना Coding Online Result Finder बनाएं |
आज जो तरीका बताने वाला हूं, उसके लिए आपको कोई कोडिंग की जरूरत नहीं है। अगर आप बिलकुल नए हैं तो फिर भी आप कर सकते हैं। शर्त यह है कि जो मैं आपको समझाता चलूं। उसको समझते रहे। और आर्टिकल ध्यानपूर्वक पूरा पढ़े।स्टेप-1
सबसे पहले आपको गूगल शीट खोल लेनी है। गूगल पर सर्च करने से भी गूगल शीट पर पहुंच सकते है। या यहां क्लिक करके भी जाया जा सकता है।स्टेप-2
शीट का नाम चेंज करें। शीट 1 (Sheet 1) लिखा होगा, उसपर डबल क्लिक करें और उसका नाम Data रखें। सीट का नाम भी चेंज कर लें।
स्टेप-3
एक्सटेंशन (Extension) नाम से एक ऑपशन दिखाई दे रहा होगा उस पर क्लिक करना है। क्लिक करने के बाद तीसरे वाले ऑपशन एप स्किप्ट (App Script) पर क्लिक करना है। फिर इस प्रकार का इंटरफेस दिखाई देगा।
स्टेप-4
कोड़ gs में जो कोड़ है उसे मिटाकर उसकी जगह यह कोड़ पेस्ट कर दें।-function doGet() {
return HtmlService.createHtmlOutputFromFile("index")
.setTitle("Student Result Finder");
}
function getResult(roll) {
const sh = SpreadsheetApp.getActive().getSheetByName("Data");
const data = sh.getDataRange().getValues();
const headers = data[0];
for (let i = 1; i < data.length; i++) {
if (data[i][0] == roll) {
let subjects = [];
let total = 0;
for (let c = 6; c < headers.length - 1; c++) {
subjects.push({
name: headers[c],
marks: data[i][c]
});
total += Number(data[i][c] || 0);
}
return {
photo: data[i][1],
name: data[i][2],
father: data[i][3],
dob: data[i][4],
address: data[i][5],
subjects: subjects,
total: total
};
}
}
return null;
}
स्टेप-5
प्लस के सिम्बल पर क्लिक करके एक Html File Add करिये। उसका नाम index रखिए। उसमें जो कोड आ रहा है उसे मिटाकर यह नया कोड पेस्ट कीजिए।
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Student Result Portal</title>
<style>
body{
margin:0;
font-family: "Segoe UI", Arial, sans-serif;
background:#f2f2f2;
}
/* HEADER */
.header{
background:#0b3c5d;
color:#fff;
padding:15px;
text-align:center;
}
.header h1{
margin:0;
font-size:22px;
letter-spacing:1px;
}
.header p{
margin:5px 0 0;
font-size:14px;
opacity:0.9;
}
/* MAIN CARD */
.container{
max-width:720px;
margin:20px auto;
background:#fff;
border:1px solid #ccc;
padding:20px;
}
.section-title{
background:#e9ecef;
padding:8px;
font-weight:600;
border-left:5px solid #0b3c5d;
margin-bottom:15px;
}
/* SEARCH */
.search-box{
text-align:center;
margin-bottom:20px;
}
input{
padding:8px;
width:200px;
border:1px solid #999;
font-size:14px;
}
button{
padding:8px 16px;
background:#0b3c5d;
color:#fff;
border:none;
cursor:pointer;
font-size:14px;
}
/* STUDENT INFO */
.info{
display:flex;
gap:20px;
margin-bottom:20px;
}
.info img{
width:120px;
height:140px;
border:1px solid #999;
}
table{
width:100%;
border-collapse:collapse;
font-size:14px;
}
th, td{
border:1px solid #999;
padding:8px;
text-align:center;
}
th{
background:#f0f0f0;
}
.footer{
text-align:center;
font-size:12px;
color:#666;
margin-top:20px;
}
@media(max-width:600px){
.info{
flex-direction:column;
align-items:center;
}
}
</style>
</head>
<body>
<div class="header">
<h1>STUDENT RESULT PORTAL</h1>
<p>Visit More info- www.nayahunar.com</p>
</div>
<div class="container">
<div class="section-title">Result Search</div>
<div class="search-box">
Roll Number :
<input type="text" id="roll" placeholder="Enter Roll No">
<button onclick="find()">Submit</button>
</div>
<div id="result"></div>
</div>
<div class="footer">
© 2026 | Naya Hunar Youtube Chennel | This is a Skillful Youtube Chennel
</div>
<script>
function find(){
let roll = document.getElementById("roll").value;
google.script.run.withSuccessHandler(show).getResult(roll);
}
function show(data){
if(!data){
document.getElementById("result").innerHTML =
"<p style='color:red;text-align:center'>Result not found</p>";
return;
}
let html = `
<div class="section-title">Student Information</div>
<div class="info">
<img src="${data.photo}">
<table>
<tr><th>Name</th><td>${data.name}</td></tr>
<tr><th>Father Name</th><td>${data.father}</td></tr>
<tr><th>Date of Birth</th><td>${data.dob}</td></tr>
<tr><th>Address</th><td>${data.address}</td></tr>
</table>
</div>
<div class="section-title">Marks Details</div>
<table>
<tr><th>Subject</th><th>Marks</th></tr>
`;
data.subjects.forEach(s=>{
html += `<tr><td>${s.name}</td><td>${s.marks}</td></tr>`;
});
html += `
<tr>
<th>Total Marks</th>
<th>${data.total}</th>
</tr>
</table>
`;
document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>
स्टेप-6
इसके बाद डिप्लॉय पर क्लिक करें। डिप्लॉय पर क्लिक करने के बाद नया डिप्लॉय पर क्लिक करें।
डिप्लॉय टाइप सेलेक्ट करें- वेव ऐप्लीकेशन, इसके बाद Who Can Access में Anyone Can See पर क्लिक करें। फिर Deploy पर क्लिक करें।
इस प्रकार आपको फाइनल में एक लिंक मिलेगा। जिसको अपने पास संभाल कर रखना है। आप इस लिंक को जब खोलेंगे तो आपको पूरा रिजल्ट सर्च करना का वेवपेज दिखाई देगा।
स्टेप- 7
गूगल शीट में इस प्रकार का फॉरमेट बना लें। अगर आपको कोई और सब्जेक्ट जोड़ने हो तो सिर्फ गूगल शीट में ही नया कॉलम में जोड़ ले। बाकी कोड़ में कोई बदलाव करने की कोई जरुरत नहीं है।
शीट में डेटा इस प्रकार भरना है-
- रोल नं
- फोटो का यूआरएल
- स्टूडेन्ट्स का नाम
- पिता का नाम
- जन्मतिथी
- पता
- सभी विषय
यदि कोई नया विषय जोड़ना हो तो ध्यान रखें आखिरी कॉलम टोटल का होना चाहिए जो कि खाली रहेगा। जन्मतिथी इसी तरह लिखें जैसा स्कीनशॉट में दिखाया गया है।
ROLL NO -100
निश्कर्ष ः
मैंने आज के इस टॉपिक में सभी कुछ बरीकी से समझा दिया है। अगर आप सच में रिजल्ट को ऑनलाइन दिखाना चाहते है तो पूरे आर्टिकल को ध्यान से समझे, और इस सिस्टम में प्रयोग होने वाले कोड को भी इसी आर्टिकल में दे दिया है। अगर आपको कुछ नया सीखने को मिला हो तो कॉमेंट में जरूर बताएं।
हमारे यूट्यूब चैनल से भी जुड़ सकते है। जहां पर प्रेक्टिकली समझाया जाता है।।
यूट्यब- https://www.youtube.com/@nayahunarofficial
एक टिप्पणी भेजें