A Web-based Result Service: Simplifying Student Result Access
Introduction In the modern era of technology, online platforms have become increasingly important for various purposes, including education. Schools and educational institutions are leveraging the power of the internet to provide efficient services to students and parents. One such service is the online result service, which allows students to easily access their exam results. In this blog post, we will explore a web-based result service that simplifies the process of checking and printing student exam results.
HTML Structure and Styling The web-based result service is built using HTML, CSS, and JavaScript. Let's dive into the structure and styling of the HTML code.
The code starts with the <!DOCTYPE html> declaration, followed by the opening <html> tag. Inside the <html> tag, we have the <title> element, which sets the title of the web page to "hnphs." The <base> tag specifies the base URL for all relative URLs in the page.
Next, we have the <meta> tag that defines the viewport settings for responsive design. It ensures that the web page adapts to different screen sizes. The two <link> tags import external CSS stylesheets for the page. The first one is the popular W3.CSS library, which provides a set of predefined styles for faster development. The second <link> tag imports the Font Awesome library, which provides a collection of scalable vector icons.
The <style> section contains custom CSS styles for the page. It includes styles for a loader animation, a table, and some hover effects. The loader animation is defined using CSS keyframes and is displayed when data is being fetched.
Moving on to the body of the page, we have a <div> element with the id="lod", which represents the loader modal. The loader is displayed while data is being fetched, and it provides visual feedback to the user.
After that, we include a JavaScript file using the <?!= include('js'); ?> syntax. This file likely contains additional functionality for the result service.
Following the JavaScript include, there is a <div> element with the class "w3-row w3-small," which contains the main content of the page. It includes the school title and a heading for the result of the pre-final examination, along with a form for result lookup.
Inside the form, there is an input field for entering the registration number, a submit button, and a print button. The submit button triggers a JavaScript function called subm() when clicked, and the print button triggers a function called Print().
Further down in the HTML code, there is a <div> element with the id="PrintDiv", which represents the printable area for the result. This div is initially empty but will be populated with the result data dynamically.
JavaScript Functions for Result Retrieval and Printing
The HTML code includes two JavaScript functions, subm(v) and Print(DivID), which are responsible for result retrieval and printing, respectively.
The subm(v) function is called when the form is submitted. It displays the loader animation by changing the display style of the loader modal to "block." Then, it uses the google.script.run method to communicate with server-side code and pass the form data. The server-side code likely retrieves the result data from a spreadsheet using Google Apps Script. The pass(v) function handles the response from the server. If the result data is empty, it displays an error message. Otherwise, it updates the content of the <div> element with the id="rs" to display the result data and resets the form.
Print(DivID) function is triggered when the print button is clicked. It retrieves thecontent of the <div> element with the specified DivID, which in this case is "PrintDiv". It then opens a new browser window using the window.open() method. Inside the newly opened window, it creates an HTML document and writes the retrieved content along with additional HTML markup for styling and printing. The docprint.document.close() method is used to finalize the document, and docprint.focus() brings focus to the newly opened window. Finally, the onLoad="self.print()" attribute is added to the <body> tag, which automatically triggers the print functionality when the page finishes loading.Server-Side Functionality and Deployment
The code includes two server-side functions, doGet(e) and include(filename), implemented using Google Apps Script. The doGet(e) function serves as the entry point for the web application. It creates a template from the "index" file, evaluates it, and sets the title of the web page to "Online Result Service". The include(filename) function is used to include the content of external HTML files.
The deployment of this web-based result service involves hosting the HTML code on a web server and deploying the server-side code using a platform like Google Apps Script. The server-side code can interact with a database or spreadsheet to retrieve the result data based on the submitted form inputs.
Donate me:
PayPal: https://www.paypal.com/paypalme/googlescript
Stripe: https://donate.stripe.com/4gwdTrdzKbuE2Aw288