School Management Software || Manage Classes 

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

mclass.html

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

<div class="w3-col s3 w3-pale-yellow">

  <select id="fromCl"onchange="fclass(this)" class="w3-select w3-col s8">

    <option value="">FROM CLASS</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="fromSec" onchange="fclass(this)"class="w3-select w3-col s4">

    <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 s3 w3-pale-blue">

  <select id="toCl"class="w3-select w3-col s8 ">

    <option value="">TO CLASS</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="toSec"class="w3-select w3-col s4">

    <option value="">SEC</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 s1">

<input type="submit"value="MOVE"class="w3-btn w3-teal w3-hover-red" onclick="toclass()"/>

<input type="hidden" id="idscls" >

</div>

<div class="w3-col s5">

<i id="refresh2" class="fa fa-circle-o-notch fa-0"onclick="fclass(this)"

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

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

</div>

</div>

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

<div id="stdsincl"

style="display: grid;font-family: times;grid-template-columns:

repeat(9, 1fr);grid-template-rows: repea(auto, 65px);grid-gap:5px;"></div>

</div>

<script>

function selidfun() {

  var sel1 = document.querySelectorAll('input[name=selidn]');

  var csl = "";

  for (var i = 0; i < sel1.length; i++) {

    if (sel1[i].checked) {

      csl = csl + sel1[i].value +",";}}

  document.getElementById("idscls").value = csl;

}

</script>

 <script>

    function fclass() {

     document.getElementById("idscls").value = "";

     var nel2    = document.getElementById('fromCl');

     var frCl    = nel2.options[nel2.selectedIndex].value;

     var sec2    = document.getElementById('fromSec');

     var frsec   = sec2.options[sec2.selectedIndex].value;

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

     if(frCl === "" || frsec === "" ){

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

     }else{

     function fail1(error){

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

     document.getElementById('clcinfo').innerHTML = error;

     };

     function pass1(reList){

     stdlist.innerHTML = reList;

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

     var cts2 =document.getElementsByName('ts2').length;

     document.getElementById('clcinfo').innerHTML = cts2+" Records found.";

     };

     stdlist.innerHTML = "";

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

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

     document.getElementById('clcinfo').innerHTML = "Getting detail...";

     google.script.run.withFailureHandler(fail1)

                      .withSuccessHandler(pass1)

                      .clcini(frCl,frsec,adreg);}};

        </script>

<script>

    function toclass() {

     var nel2    = document.getElementById('fromCl');

     var frCl    = nel2.options[nel2.selectedIndex].value;

     var toCl    = document.getElementById('toCl');

     var toClv   = toCl.options[toCl.selectedIndex].value;

     var toSec   = document.getElementById('toSec');

     var toSecv  = toSec.options[toSec.selectedIndex].value;

     let idlist = document.querySelector('#idscls').value;

     if(toClv === "" || toSecv === ""|| idlist ===""){

     document.getElementById('clcinfo').innerHTML = "Select ID";

     }else{

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

     var dtlist  = [toClv,toSecv,idlist,frCl,adreg]

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

     function fail2(error){

     stdlist.innerHTML = error;

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

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

     };

     function pass2(ttl){

     fclass();//get update

     stdlist.innerHTML = "Getting updates.....";

     document.getElementById('clcinfo').innerHTML = ttl;

     document.getElementById('toCl').selectedIndex = 0;

     document.getElementById('toSec').selectedIndex = 0;

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

     };

     stdlist.innerHTML = "";

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

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

     google.script.run.withFailureHandler(fail2)

                      .withSuccessHandler(pass2)

                      .clcfun(dtlist);}};

        </script>

This HTML and JavaScript code creates a user interface for managing student class and section assignments within a web application. The interface allows users to select a class and section from which students will be moved, and a class and section to which the students will be moved. Here's a detailed description of each part of the code:

HTML Structure

Row 1: Selection Dropdowns

• From Class and Section:

  • Two dropdowns (select elements) allow users to select the class and section from which students will be moved. The options range from Nursery to VIII, including special statuses like Pending and Leaved.
  • The first dropdown (ID: fromCl) has an onchange event that triggers the fclass function.
  • The second dropdown (ID: fromSec) also triggers the fclass function on change.

• To Class and Section:

  • Similar to the "From" dropdowns, these allow users to select the destination class and section for the students.
  • The first dropdown (ID: toCl) allows class selection.
  • The second dropdown (ID: toSec) allows section selection.

Row 2: Move Button

• Move Button:

  • A button labeled "MOVE" (class: w3-btn w3-teal w3-hover-red) triggers the toclass function to move the students.
  • An additional hidden input (ID: idscls) is used to store the IDs of the selected students.

• Icons and Info Display:

  • An icon (ID: refresh2) is used to refresh the student list by triggering the fclass function.
  • A placeholder (ID: clcinfo) displays messages and status updates.

Student List Display

• Scrollable Div:
  • A div (ID: stdsincl) displays the list of students in a grid layout. It is styled for overflow to enable scrolling if the list is long.

JavaScript Functions

selidfun

• Purpose:
  • Collects the IDs of selected students and stores them in the hidden input field (idscls).
• Implementation:
  • Iterates over all checkboxes (input[name=selidn]) and concatenates the values of checked ones.

fclass

• Purpose:
  • Retrieves and displays the list of students based on the selected class and section.
• Implementation:
  • Reads the selected "From Class" and "From Section" values.
  • If both are selected, it calls a Google Apps Script function (clcini) to get the student list.
  • Handles success (pass1) and failure (fail1) scenarios.

toclass

• Purpose:
  • Moves selected students to the new class and section.
• Implementation:
  • Reads the selected "To Class," "To Section," and the list of selected student IDs.
  • If all necessary values are provided, it calls a Google Apps Script function (clcfun) to update the student assignments.
  • Handles success (pass2) and failure (fail2) scenarios.

Google Apps Script Integration

• The functions fclass and toclass interact with Google Apps Script using the google.script.run API.
• clcini function is called to fetch student details.
• clcfun function is called to update the student assignments.

User Interaction

• Users select the "From Class" and "From Section" to display the current list of students.
• Users can check the students they want to move.
• Users select the "To Class" and "To Section," and click the "MOVE" button to reassign the students.
• Status messages and the student list are updated dynamically based on user actions.

This setup provides a user-friendly interface for managing student class and section assignments, leveraging Google Apps Script for server-side data handling. 

code.gs

Paste following code below to the previous code.

//initialize class change data

   function clcini(frCl,frsec,adreg) {

    var ws = SpreadsheetApp.openById(adreg).getSheetByName("addatastore");

    var tr = ws.getDataRange().getValues();

    var wr ='';

    for(var i=0; i<tr.length ; i++){

    if(frsec == "ALL"){ var sec = tr[i][37]+"!=''";}else{ var sec = tr[i][37] == frsec;}

    if(frCl == tr[i][36] && sec && tr[i][0] !=""){

    if(tr[i][1]===""){var img= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix5QyxqqPqRoxOnUtooV2kEavXxDEJ_0sX0m8Z6Kk1Sg0UvEdaSm0bz1Hip4G_wNTcb1FzR5u9QSUu0R01oCt6u4ZhZhwGQPxx3H0RM452OX2spCngKyxwaw-AN2IjH2ejPyjZfU0qC-LFp9sM0Vzt7DgZtsgg9AoDBl18P9qKEn9UBTr97xMnJMwjyQ/s320/avatar-1577909_1280.webp";}else{var img= tr[i][1];}

    wr+="<label for='"+tr[i][0]+"'><table name='ts2'><tr><td height=105px class=bnone align=center><img src="+img+" width=90px height=100px></td></tr><tr><td class='w3-white cap'align=center>"+tr[i][2]+"</td></tr><tr><td class='w3-red'><input type='checkbox'id='"+tr[i][0]+"' class='slids' name='selidn' value="+tr[i][0]+" onchange='selidfun()'> ID: "+tr[i][0]+ "</td></tr></table></label>";} }

    return wr;}

//class changing by Id.

function clcfun(dtlist){

  var ws = SpreadsheetApp.openById(dtlist[4]).getSheetByName("addatastore");

  var clr = ws.getDataRange().getValues();

  var dt = Utilities.formatDate(new Date(),Intl.DateTimeFormat().resolvedOptions().timeZone, 'dd-MM-yyyy  hh:mm:ss a');

  var idL = dtlist[2].split(",");

  for (var x = 0; x <idL.length; x++){

  for(var i = clr.length-1; i >= 0; i--){

  if(clr[i][0] === idL[x]){

      ws.getRange(i+1, 37).setValue(dtlist[0]);

      ws.getRange(i+1, 38).setValue(dtlist[1]);

      ws.getRange(i+1, 39).setValue(dtlist[3]+" to "+dtlist[0]);

      ws.getRange(i+1, 40).setValue(dt).setNumberFormat('@STRING@');

    var ttl = idL.length-1 +" students moved to class "+dtlist[0]+"-"+dtlist[1];

    };};};

    return ttl};

Function 1: clcini

This function initializes the data for students in a specific class and section, preparing it for display.

Parameters:

• frCl: The class from which students are being selected.
• frsec: The section from which students are being selected.
• adreg: The ID of the Google Spreadsheet containing student data.

Functionality:

1. Open the Spreadsheet:

   • Opens the spreadsheet by its ID and gets the sheet named "addatastore".

2. Read Data:

   • Reads all data from the sheet into the variable tr.

3. Filter and Build HTML:

   • Iterates through each row of data.
   • Checks if the student's section matches the selected section (or is "ALL").
   • If the student is in the selected class and section, and has a valid ID:
     • Uses a default image if the student's image URL is empty.
     • Constructs HTML for each student, including an image, name, and a checkbox for selection.

Return:

• Returns a string (wr) containing the HTML structure for displaying the students.

Function 2: clcfun

This function updates the class and section for selected students.

Parameters:

• dtlist: An array containing:
  • dtlist[0]: The new class to which students will be moved.
  • dtlist[1]: The new section to which students will be moved.
  • dtlist[2]: A comma-separated string of student IDs.
  • dtlist[3]: The original class from which students are being moved.
  • dtlist[4]: The ID of the Google Spreadsheet containing student data.

Functionality:

1. Open the Spreadsheet:

   • Opens the spreadsheet by its ID and gets the sheet named "addatastore".

2. Read Data:

   • Reads all data from the sheet into the variable clr.

3. Get Current Date and Time:

   • Gets the current date and time formatted as a string.

4. Process Each Student:

   • Splits the list of student IDs into an array.
   • For each student ID:
     • Iterates through the data to find the matching student.
     • Updates the student's class, section, and the change log in the spreadsheet.

5. Return:

   • Returns a message indicating the number of students moved and their new class and section.