Attendance Management System in JavaScript with Source Code

Attendance Management System in JavaScript with Source Code

by

Attendance Management System in JavaScript with Source Code

The Attendance Management System in JavaScript is a simple project designed in JavaScript language using HTML and CSS platform. 

This system includes an admin side and a user side that allows a user to enter for attendance.

In controlling this method, the admin has an important role to play.

The Attendance Management System can be accessed without the student login information being provided.

Which also includes the entry period, the student has to enter his or her student id number.

The admin may add student records from the admin panel by entering the id, name, course, and section.

All the attendance records can be accessed by the admin.

This simple mini project for Attendance Management System in JavaScript is complete and totally error free and  also includes a downloadable Source Code for free, just find the downloadable source code below and click to start downloading.

Before you start to click the download now first you must click the Run Quick Scan for secure Download. 

These are the following features of Attendance Management System in JavaScript

  • Homepage – For the homepage you can see the accounts of students, admin and the records of students attendance.
  • Manage User Account – The admin can manage the user’s account. Admin can add, update and Block Users in the system.
  • Student Management – The admin can manage the student account. Admin can add, update and delete student’s in the system.
  • Manage Student Record – The admin can manage the student record. Admin can see the student login time and date.
  • Login and Logout – By default one of the security features of this system is the secure login and logout system. The login and logout system of this Attendance Management System in JavaScript source code uses a session. It means that the user can only log in at once on the same browser.

Anyway if you want level up your knowledge in programming especially C/C++ Programming Language, try this new article I’ve made for you Best C Projects with Source Code for Beginners Free Download.

I have here a suggested list of Best JavaScript Projects with Source Code Free to download and I’m sure this can help you to improve your skills in JavaScript programming and web development as a whole.

To start creating a Attendance Management System in JavaScript, make sure that you have any platform in creating a JavaScript, bootstrap, and HTML installed in your computer, in my case I will use Sublime Text.

Attendance Management System in JavaScript with Source Code Steps on How to Create a Project

Time needed: 5 minutes

Here’s the Steps on How to Create a Attendance Management System in JavaScript with Source Code

  • Step 1: Open Sublime Text.

    First, after installing sublime text IDE, click “open” to start.

  • Step 2: Create a HTML file.

    Next, click “file” and select “save as” and named it “index.html“.
    create index.html for Attendance Management System in JavaScript with Source Code

  • Step 3: Create a JavaScript file.

    Last, click “file” and select “save as” and named it “login.js“.
    create login.js for Attendance Management System in JavaScript with Source Code

  • Step 4: The actual code.

    Finally, You are free to copy the code given below and paste to your different file created.

Code for the index.html in Attendance Management System in JavaScript

In the code given below, which is the code contains the interface of the application. This code will show the form that will be use in html.

<!DOCTYPE html>
<html lang = "eng">
	<head>
		<meta charset = "utf-8" />
		<title>CHMSC Attendance Management System</title>
		<meta name = "viewport" content = "width=device-width, initial-scale=1" />
		<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
	</head>
	<body class = "alert-info">
		<nav class = "navbar navbar-inverse navbar-fixed-top" style="background-color: green; color: white;" >
			<div class = "container-fluid">
				<div class = "navbar-header">
					<img src = "admin/images/chmsc.jpg" width = "50px" height = "50px"/>
					<p class = "navbar-text pull-right" style="color: white;">CHMSC Attendance Management System</p>
				</div>
			</div>
		</nav>
		<div class = "container-fluid">
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<div class = "col-lg-3"></div>
			<div class = "col-lg-6 well" >
				<h2 class = "btn btn-success" style="background-color: green; width:628px;">Attendance Login</h2>
				<br />
				<div id = "result"></div>
				<br />
				<br />
				<form enctype = "multipart/form-data">
					<div class = "form-group">
						<label>Student ID:</label>
						<input type = "text" id = "student" class = "form-control" required = "required"/>
						<br />
						<br />
						<div id = "error"></div>
						<br />
						<button type = "button" id = "login" class = "btn btn-success btn-block"><span class = "glyphicon glyphicon-login"></span>Login</button>
					</div>
				</form>
			</div>
		</div>
		<div class = "navbar navbar-fixed-bottom" style="background-color: blue; color: white;">
			<div class = "container-fluid">
				<center><label>&copy; CHMSC Attendance Management System 2021</label></center>
				
			</div>	
		</div>	
	</body>
	<script src = "js/jquery.js"></script>
	<script src = "js/bootstrap.js"></script>
	<script src = "js/login.js"></script>
</html>

Code for the login.js in Attendance Management System in JavaScript

In the code given below, which is the code contains the interface function of the application. This code will show the function of the form that will be use in html.

$(document).ready(function(){
	$error = $('<center><h2 class = "text-danger">You are not a student here...<h2></center>');
	$error1 = $('<center><h2 class = "text-danger">Please fill up the field<h2></center>');
	$('#login').click(function(){
		$error.remove();
		$error1.remove();
		$student = $('#student').val();
		if($student == ""){
			$error1.appendTo('#error');
		}else{	
			$.post('check.php', {student: $student},
				function(show){
					if(show == 'Success'){
						$.ajax({
							type: 'POST',
							url: 'login.php',
							data: {
								student: $student
							},
							success: function(result){
								$result = $('<h2 class = "btn btn-primary">You have been login:</h2>' + result).appendTo('#result');
								$('#student').val('');
								setTimeout(function(){
									$result.remove();
								}, 10000);
							}
						});
					}else{
						$('#student').val('');
						$error.appendTo('#error');
					}
				}
			)
		}	
	});
});

ABOUT PROJECTPROJECT DETAILS
Project Name :Attendance Management System in JavaScript
Project Platform :JavaScript
Programming Language Used:php,javascript,html,css
Developer Name :itsourcecode.com
IDE Tool (Recommended):Sublime
Project Type :Web Application
Database:None

Downloadable Source Code

Download Now

How to Run this Attendance Management System in JavaScript

Requirements:

  • Download and Install any local web server such as XAMPP
  • You will download the provided source code zip file. ( download now button is located above)

Setup/Installation

  • Open your XAMPP/WAMP’s Control Panel and start “Apache” and “MySQL”.
  • Extract the source code zip file.
  • If you are using XAMPP, copy the extracted source code folder and paste it into the XAMPP’s “htdocs” directory.
  • Open a web browser and browse the PHPMyAdmin. http://localhost/phpmyadmin
  • Create a new database naming “attendance”.
  • Import the SQL file provided. The file is known as “attendance.sql” and located inside the “database file” folder.
  • Browse the Web Application in a browser/chrome. i.e. http://localhost/attendance

Admin Login Details

Username: itsourcecode.co
Password: itsourcecode

Summary

In summary, this Attendance Management System in JavaScript with Source Code can be useful to students or professional who wants to learn web development using JavaScript programming language and it is used html and css platform.

This project can also be modified to fit your personal requirements.

Hope this project will help you to improve your skills. Happy coding!

If you’re looking for a PHP Based Attendance Monitoring System you can click it here.

Here’s the Sample Source Code for this Attendance Monitoring System Thesis Document

Inquiries

If you have any questions or suggestions about Attendance Management System in JavaScript with Source Code, please feel free to leave a comment below.

6 thoughts on “Attendance Management System in JavaScript with Source Code”

Leave a Comment