Create School Management System || Student list

Student List || School Management System || SMS

                        Create School Management System Page-5 || Student list   

          This provided HTML and JavaScript code create a user interface for selecting student lists based on various criteria and printing the results. Here's a brief overview of the functionality:

HTML Structure:

• Selectors for Filtering Students:

  • stt3: Filter by type (School, Hostal).
  • stt4: Filter by residency status (Outer, Stayer).
  • vstlist: A dynamic dropdown that is populated with student names or other data.
  • stdlc: Filter by class (Nursery, LKG, etc.).
  • stdls: Filter by section (A, B, C, D).

• Refresh and Info Display:

  • refreshstl: An icon to refresh the student list.
  • stdlinfo: An element to display information about the number of records found.

• Print Button:

  • A button to print the student list.

• Result Display:

  • stdlresult: A div to display the resulting student list.

JavaScript Functions:

1. stdlist():

   • Gathers selected filter values.
   • Updates the student list based on the selected criteria.
   • Uses Google Apps Script (google.script.run) to fetch the filtered student list and handle success and failure scenarios.

2. kPrint(id):

• Opens a new window and prepares the content for printing.
• Formats the print layout and includes the current date and a footer message.
• Prints the content and then closes the print window.

Put the following code inside the student-list.html :

student-list.html

<div class="w3-row-padding w3-border-bottom">

<div class="w3-col s4">

    <select id="stt3" class="w3-select w3-col s3 w3-pale-red"onchange="stdlist()">

    <option value="ALL">default</option>

    <option value="School">School</option>  

    <option value="Hostal">Hostal</option>

    </select>

    <select id="stt4" class="w3-select w3-col s3 w3-pale-red"onchange="stdlist()">

    <option value="ALL">default</option>

    <option value="Outer">Outer</option>

    <option value="Stayer">Stayer</option>

    </select>

    <select id="vstlist"class="w3-select w3-col s6 cap w3-pale-blue"onchange="stdlist()">

    <option value="">Loading...</option></select>

</div>

<div class="w3-col s2">

    <select id="stdlc"onchange="stdlist()"class="w3-select w3-col s8 w3-pale-yellow">

    <option value="">CLASS</option>

    <option value="N&8">Active</option>

    <option value="P&L">Deactive</option>

    <option value="All">All</option>

    <option value="Nur">Nursery</option>

    <option value="LKG">LKG</option>

    <option value="UKG">UKG</option>

    <option value="I">I</option>

    <option value="II">II</option>

    <option value="III">III</option>

    <option value="IV">IV</option>

    <option value="V">V</option>

    <option value="VI">VI</option>

    <option value="VII">VII</option>

    <option value="VIII">VIII</option>

    <option value="Pending">Pending</option>

    <option value="Leaved">Leaved</option>

    </select>

    <select id="stdls" onchange="stdlist()"class="w3-select w3-col s4 w3-pale-yellow">

    <option value="ALL">ALL</option>

    <option value="A">A</option>

    <option value="B">B</option>

    <option value="C">C</option>

    <option value="D">D</option>

    </select>

</div>

<div class="w3-col s5">

<i id="refreshstl" class="fa fa-circle-o-notch fa-0"onclick="stdlist()"

style="font-size:20px;margin-top:9px"></i>

<i id="stdlinfo"style="margin-top:15px"></i>

</div>

<div class="w3-col s1 w3-right">

<input type="button" name="btnprint" value="Print" onclick="kPrint('stdlresult')"

class="w3-btn w3-teal w3-hover-red">

</div>

</div>

<div style="overflow: auto;height:520px;">

<div id="stdlresult"align="center"></div></div>

 <script>

    function stdlist() {

     var nel1   = document.getElementById('stdlc');

     var nv1    = nel1.options[nel1.selectedIndex].value;

     var sec1   = document.getElementById('stdls');

     var secv1  = sec1.options[sec1.selectedIndex].value;

     var stt    = document.getElementById('stt3');

     var stt1   = stt.options[stt.selectedIndex].value;

     var stx    = document.getElementById('stt4');

     var stt2   = stx.options[stx.selectedIndex].value;

     var stl    = document.getElementById('vstlist');

     var sttv   = stl.options[stl.selectedIndex].value;

     var stdlist = document.querySelector('#stdlresult');

     if(secv1 === "" || nv1 === ""){

     document.getElementById('stdlinfo').innerHTML = "";

     }else{

     function fail0(error){

     stdlist.innerHTML = "<span style='color:red'>"+error+"</span>";

     document.getElementById("refreshstl").classList.remove('fa-spin');

     document.getElementById('stdlinfo').innerHTML = "";

     };

     function pass0(reList){

     stdlist.innerHTML = reList;

     document.getElementById("refreshstl").classList.remove('fa-spin');

     var cts1 =document.getElementById('ts').rows.length-1;

     document.getElementById('stdlinfo').innerHTML = cts1+" Records found.";

     };

     let adreg = document.querySelector('#adreg').value;

     stdlist.innerHTML = "";

     document.getElementById("refreshstl").classList.add('fa-spin');

     document.getElementById('stdlinfo').innerHTML = "Working on...";

     google.script.run.withFailureHandler(fail0)

                      .withSuccessHandler(pass0)

                      .studentList(nv1,secv1,adreg,stt1,stt2,sttv);}};

        </script>

<script>

function kPrint(id) {

   var iPrint = document.getElementById(id).innerHTML;

   var dp=window.open("","");

   var dt = new Date();

   var nel1    = document.getElementById('stdlc');

   var nv1     = nel1.options[nel1.selectedIndex].value;

   var sec1    = document.getElementById('stdls');

   var secv1     = sec1.options[sec1.selectedIndex].value;

   dp.document.open();

   dp.document.write('<!DOCTYPE html>');

   dp.document.write('<head><meta name="viewport" content="width=device-width, initial-scale=1.0">');

   dp.document.write('<title>Students-list-'+nv1+'-'+secv1+'-'+dt.toLocaleDateString()+'</title>');

   dp.document.write('<style type="text/css">@page{size:auto;}table,div{break-inside: avoid;}');

   dp.document.write('table{text-transform:capitalize;font-family:times;

font-size:12px;border:1px solid #CCC;width:100%;}td{padding:0px; margin:0px;border: 1px solid #CCC;}

th{background-color: #232C8B; color: #FFF; font-weight: bold;}.h11{display:none;}</style>');

   dp.document.write('</head><center><body onLoad="self.print()">');

   dp.document.write(iPrint);

   dp.document.write('<font face=times size=1px>

Date of issue:'+dt+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;℗Power by

Imran Websoft Technology.</font></center></body></html>');

   dp.onafterprint = window.close;

   dp.print();

}

</script>

Paste the following code below to previous code inside Code.gs file

Code.gs

function studentList(nv1, secv1, adreg, stt1, stt2, sttv) { var ws = SpreadsheetApp.openById(adreg).getSheetByName("addatastore"); var tr = ws.getDataRange().getValues(); var wr = '<table width=100% id=ts>'; for (var i = 0; i < tr.length; i++) { var spt = tr[i][35].toLocaleString(); if (nv1 == "N&8") { var cv = tr[i][36] == "Nur" || tr[i][36] == "LKG" || tr[i][36] == "UKG" || tr[i][36] == "I" || tr[i][36] == "II" || tr[i][36] == "III" || tr[i][36] == "IV" || tr[i][36] == "V" || tr[i][36] == "VI" || tr[i][36] == "VII" || tr[i][36] == "VIII"; } else if (nv1 == "P&L") { var cv = tr[i][36] == "Leaved" || tr[i][36] == "Pending"; } else if (nv1 == "All") { var cv = tr[i][36] != ""; } else { var cv = tr[i][36] == nv1; } if (stt1 == "ALL") { var sv1 = tr[i][31] != ''; } else { var sv1 = tr[i][31] == stt1; } if (stt2 == "ALL") { var sv2 = tr[i][32] != ''; } else { var sv2 = tr[i][32] == stt2; } if (sttv == "ALL") { var svl = tr[i][14] != ''; } else { var svl = tr[i][14] == sttv; } if (secv1 == "ALL") { var sec = tr[i][37] != ''; } else { var sec = tr[i][37] == secv1; } if (sv1 && sv2 && svl && cv && sec) { var gn = tr[i][3]; wr += "<tr class=cap><td valign=top width=60px rowspan=4>" + "<img src='" + tr[i][1] + "' width=65px height=75px></td><td>Name:</td><td>" + tr[i][2] + "</td>" + "<td>Address(P):</td><td class=cap>" + tr[i][8] + ", " + tr[i][9] + ", " + tr[i][10] + ", " + tr[i][11] + "," + tr[i][12] + ", " + tr[i][13] + "</td></tr><tr><td>DOB:</td><td>" + tr[i][4] + " (" + gn[0] + " - " + tr[i][5] + ")" + "</td><td>Address(T):</td><td class=cap>" + tr[i][14] + ", " + tr[i][15] + ", " + tr[i][16] + ", " + tr[i][17] + ", " + tr[i][18] + "</td></tr><tr><td>DocNo.</td><td>" + tr[i][22] + " - " + tr[i][21] + "</td><td>Sponsor:</td><td class=cap>" + tr[i][41] + " (" + tr[i][42] + "),+91" + tr[i][43] + "," + tr[i][44] + "</td></tr>" + "<tr><td>Father's name:</td><td class=cap>" + tr[i][6] + "</td><td>PRS</td><td>" + tr[i][24] + "," + tr[i][25] + "," + tr[i][26] + "," + tr[i][27] + "</td></tr><tr><th>" + tr[i][0] + "</th><td>Mother's name:</td><td class=cap>" + tr[i][7] + "</td><td>Adm.Detail</td><td>" + tr[i][31] + "," + tr[i][32] + ", Ad.charge-" + tr[i][33] + "," + tr[i][34] + ", Ad.Date-" + tr[i][35] + "</td></tr><tr><td align=center>BANK</td><td class=cap>" + tr[i][50] + "</td><td>" + tr[i][49] + "</td><td>Other:</td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr>"; } } wr += '</table>'; return wr; }

Explanation:
Variables and Data Extraction:

• ws: Opens the specified Google Sheet by its ID.

• tr: Retrieves all the data from the sheet.

Loop Through Data:

• Iterates through each row of the data.

• Extracts specific columns from the current row (studentData).

Filtering Conditions:

• matchesClass: Checks if the student's class matches the selected filter.

• matchesType1, matchesType2: Checks if the student's types match the selected filters.

• matchesAddressTemp: Checks if the student's temporary address matches the selected filter.

• matchesSection: Checks if the student's section matches the selected filter.

Building HTML Table Rows:

• If all conditions are met, the function constructs the HTML for a table row with student information.

• Concatenates the relevant student details into the wr string.

Return the HTML String:

• The function returns the constructed HTML string for the student list

   Create School Management System Page-6 || Class Management System