0% found this document useful (0 votes)

9 views105 pages

Web-Based Trainee Tracking System Report

The document is a project report on a web-based trainee tracking system developed for CSIR-CIMFR, Dhanbad, by Ravi Kumar Das during his vocational training. It outlines the project's objectives, the technologies used (HTML, CSS, JavaScript, MySQL), and includes details about the system's functionalities such as status tracking and administrative access. The report also acknowledges the support received from various individuals and departments during the project.

Uploaded by

regards56511

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

9 views105 pages

Web-Based Trainee Tracking System Report

Uploaded by

regards56511

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

1

A PROJECT REPORT ON WEB BASED TRAINEE

TRACKING SYSTEM OF CSIR-CIMFR,DHANBAD
at
CSIR-CIMFR, DHANBAD.
Project Report
On

Vocational Training

During the period from 20 th May, 2024 to 20 th June, 2024

Name: Ravi Kumar Das

Registration no: 21033445016

3rd year B. Tech (Computer Science & Engineering)

Ramgarh Engineering College, Ramgarh

Ramgarh-825101

District - Ramgarh, Jharkhand

Under Supervision of

Dr. Shankhajit Mitra

CSIR-Central Institute of Mining and Fuel Research,

Barwa Road, Dhanbad
2

ACKNOWLEDGEMENT

I am grateful to Prof. Arvind Kumar Mishra, Director, CSIR - CIMFR and Dr. Dilip
Kumbhakar, chief scientist, and head, HRD CIMFR, Dhanbad for permitting us to do a project
at this institute.
At the very outset, I would like to express my sincere gratitude to Dr. Shankhajit Mitra (Project
Planning and Monitoring/ GST Cell) for his support. He took his time off from work and
explained about the practical aspects of the project. His valuable guidance has helped me to
complete this project and make it full proof success. His suggestions and instructions have
served as the major contributor towards the completion of the project. This work would be
incomplete without his involvement.
I would also express my gratitude to the HRD department of CSIR-CIMFR,DHANBAD who
were very helpful throughout this training period. Last but not the least, I would like to extend
my sincere thanks to my family members, without whose support this would not have been
possible.
3
4

CONTENT
[Link] TOPICS PAGE NO

01 INTRODUCTION 5

02 OBJECTIVE 6

03 LANGUAGES & TECHNOLOGIES USED 7-13

04 DFD FOR ADMIN PANEL 14

05 DFD FOR USER 15

06 SNAPSHOTS WITH RESPECTIVES SOURCE CODES: -

07 REFERENCE 137
5

INTRODUCTION

A "Trainee Status Check" website typically refers to a website or online platform that allows
individuals or trainees to check their current status or progress in a training program or course. These
websites are often used by educational institutions, training organizations, or companies to provide
trainees with an easy way to track their training progress and access relevant information.

The specific features and functionalities of a Trainee Status Check website can vary depending on the
organization or institution implementing it. However, some common features you might find on such
a website include:

1. Status Check: Trainees can check their status by using the college name or their provided reference
numbers.

2. Forms: There are two forms available for training and dissertations, where users can fill out the
form according to the given guidelines.

3. About Page: The website may have an about page that provides details about the institute or
organization.

4. Contact Information: The website should provide contact information for trainees to reach out with
any inquiries or concerns.
6

2. OBJECTIVE

The objectives of a Trainee Status Check website may vary depending on the specific
requirements of the organization or training program. However, here are some common
objectives that such a website may aim to achieve:

Status Tracking: The primary objective of the website is to provide trainees with a
convenient way to check their training status.
Easy Application Process: The website should allow students to easily apply for training
programs through the platform.
Administrative Access: The administrator should be able to access the admin panel to
review, approve, reject, or manage pending applications.
7

[Link] & TECHNOLOGIES USED

LANGUAGES:

HTML
CSS
JavaScript
MySQL

TECHNOLOGIES:

VS Code
Xampp
8

HTML
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”,
“this is a link”, etc.
EX:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

“Hypertext” refers to links that connect web pages to one another, either within a single
website or between websites. Links are a fundamental aspect of the Web. By uploading
content to the Internet and linking it to pages created by other people, you become an active
participant in the World Wide Web.

HTML uses “markup” to annotate text, images, and other content for display in a Web
browser. HTML markup includes special “elements” such as <head>, <title>, <body>,
<header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>,
<canvas>, <datalist>, <details>, <embed>, <nav>, <search>, <output>, <progress>, <video>,
<ul>, <ol>, <li> and many others.

An HTML element is set off from other text in a document by “tags”, which consist of the
element name surrounded by “<” and “>”. The name of an element inside a tag is case-
insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the
<title> tag can be written as <Title>, <TITLE>, or in any other way. However, the
convention and recommended practice is to write tags in lowercase
9

CSS
CSS is the language we use to style an HTML [Link] describes how HTML elements
should be [Link] describes how HTML elements should be displayed.
EX:
<!DOCTYPE>
<html>
<head>
<style>
h1{
color:white;
background-color:red;
padding:5px;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>Write Your First CSS Example</h1>
<p>This is Paragraph.</p>
</body>
</html>
10

JAVASCRIPT

JavaScript (js) is a light-weight object-oriented programming language which is used by

several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML document.
It was introduced in the year 1995 for adding programs to the webpages in the Netscape
Navigator browser. Since then, it has been adopted by all other graphical web browsers. With
JavaScript, users can build modern web applications to interact directly without reloading the
page every time. The traditional website uses js to provide several forms of interactivity and
simplicity.
Features of JavaScript
There are following features of JavaScript:
All popular web browsers support JavaScript as they provide built-in execution
environments.
JavaScript follows the syntax and structure of the C programming language. Thus, it is a
structured programming language.
JavaScript is a weakly typed language, where certain types are implicitly cast (depending on
the operation).
JavaScript is an object-oriented programming language that uses prototypes rather than using
classes for inheritance.
It is a light-weighted and interpreted language.
It is a case-sensitive language.
JavaScript is supportable in several operating systems including, Windows, macOS, etc.
It provides good control to the users over the web browsers.

EX: <script>
[Link](“Hello JavaScript by JavaScript”);
</script>
11

[Link]
Overview of [Link]

[Link] is a powerful, open-source, cross-platform JavaScript runtime environment that

executes JavaScript code outside of a web browser. It was developed by Ryan Dahl in 2009 and
is built on the V8 JavaScript engine, which is the same engine used by Google Chrome. [Link]
is designed for building scalable network applications and server-side scripting, allowing
developers to use JavaScript for both client-side and server-side programming.

Key Features of [Link]

1. Asynchronous and Event-Driven:

o Non-Blocking I/O: [Link] uses non-blocking, event-driven I/O operations,
which makes it efficient and suitable for real-time applications.
o Event Loop: It uses an event loop architecture to handle multiple operations
concurrently without blocking the execution of other operations.
2. Single-Threaded:
o Despite being single-threaded, [Link] can handle multiple concurrent
connections efficiently thanks to its event loop and asynchronous nature.
3. Fast Execution:
o V8 Engine: [Link] is powered by the V8 JavaScript engine, which compiles
JavaScript directly to machine code, making execution very fast.
o Efficient: The non-blocking architecture ensures that [Link] performs well
under high loads.
4. Package Management:
o NPM (Node Package Manager): [Link] comes with NPM, the largest
ecosystem of open-source libraries and packages. NPM allows developers to
share and reuse code easily.
5. Cross-Platform:
o [Link] runs on various platforms, including Windows, Linux, Unix, and
macOS, making it versatile and widely adoptable.
6. Rich Ecosystem:
o Libraries and Frameworks: [Link] has a rich ecosystem of libraries and
frameworks like [Link], Koa, and Hapi, which simplify server-side
development.

Common Use Cases

1. Web Servers:
o [Link] is frequently used to build web servers and APIs due to its efficiency
and scalability.
2. Real-Time Applications:
o It is ideal for real-time applications such as chat applications, online gaming,
collaboration tools, and live streaming.
12

3. Microservices:
o [Link] supports the microservices architecture, allowing developers to build
modular and independently deployable services.
4. Command-Line Tools:
o Many command-line tools and scripts are built with [Link] due to its
flexibility and ease of use.
5. IoT Applications:
o [Link] is also used in Internet of Things (IoT) applications due to its
lightweight nature and event-driven architecture.
13

MYSQL

MySQL is an open-source relational database management system (RDBMS) that is widely

used for building and managing databases. It is a popular choice for web applications and
other projects that require a robust and scalable database solution.

Here are some key points about MySQL:

Relational Database Management System: MySQL follows the relational model for
managing data. It organizes data into tables with rows and columns, allowing for efficient
storage and retrieval of data.

Open-Source: MySQL is open-source software, which means it is free to use and can be
modified and distributed by anyone. It is developed and maintained by Oracle Corporation.

Cross-Platform Compatibility: MySQL is compatible with various operating systems such as

Windows, macOS, Linux, and UNIX. It can run on both small-scale and enterprise-level
systems.

SQL Language Support: MySQL supports the SQL (Structured Query Language) for
querying, modifying, and managing the data stored in its databases. SQL provides a
standardized way to interact with relational databases.

Data Security: MySQL provides various security features, including user authentication,
access control, and encryption, to ensure the confidentiality and integrity of data.

Scalability and Performance: MySQL is designed to handle large amounts of data and high
traffic loads. It supports features like indexing, caching, and replication to optimize
performance and scalability.

Integration and Connectivity: MySQL offers connectors and APIs for various programming
languages, making it easy to integrate with different applications and frameworks.
14

• ejs (Embedded JavaScript templates):

• Version: ^3.1.10
• Description: EJS is a templating language that enables you to generate HTML with
plain JavaScript. It's commonly used for embedding JavaScript code within HTML
files to create dynamic web pages.

• ejs-mate:

• Version: ^4.0.0
• Description: EJS Mate is an extension for EJS that provides layout and partial
support, making it easier to create reusable templates and maintain consistent
structure across different web pages.

• email-check:

• Version: ^1.1.0
• Description: This library validates email addresses by checking their format and
verifying the existence of the domain's mail exchange (MX) records, ensuring that the
email address can potentially receive emails.

• express:

• Version: ^4.19.2
• Description: Express is a widely-used, fast, and minimalist web framework for
[Link]. It simplifies the process of building robust web applications and APIs by
providing a range of features out of the box.

• fs (File System):

• Version: ^0.0.1-security
• Description: This is a placeholder for the [Link] 'fs' (file system) module, which
provides an API for interacting with the file system to read, write, and manipulate
files and directories.

• joi:

• Version: ^17.13.1
• Description: Joi is a powerful validation library for JavaScript objects. It allows you
to define schemas for your data and validate them, ensuring the data meets the
required format and constraints.

• method-override:

• Version: ^3.0.0
• Description: Method-override is an Express middleware that allows you to use HTTP
methods like PUT and DELETE where they are not supported by the client. It enables
method overriding using query parameters or custom headers.
15

• multer:

• Version: ^1.4.5-lts.1
• Description: Multer is a middleware for handling multipart/form-data, primarily
used for file uploads in Express applications. It makes handling file uploads
straightforward and supports various storage options.

• mysql2:

• Version: ^3.9.8
• Description: MySQL2 is a MySQL client for [Link]. It provides a fast and efficient
way to interact with MySQL databases, supporting both callback and promise-based
APIs for query execution.

• nodemailer:

• Version: ^6.9.13
• Description: Nodemailer is a module for [Link] applications that facilitates sending
emails. It supports various transport methods, including SMTP, and makes it easy to
integrate email functionality into your applications.
16

DFD FOR ADMIN PANEL

DFD FOR USER

File Structure

[Link]

const express = require("express");

[Link]([Link]());
[Link]([Link]({ extended: true }));
[Link](methodOverride("_method"));

// [Link]("/uploads", [Link]("./public/uploads"));

[Link]("view engine", "ejs");

[Link]("views", [Link](__dirname, "./views"));
[Link]("ejs", ejsMate);
// Serve static files from the 'public' directory
[Link]([Link]([Link](__dirname, "/public")));
19

[Link]("/admin", (req, res) => {

[Link](
"select * from student; select * from student where applicationStatus =
'selected' and sendEmail = 'true'; select * from student where
applicationStatus = 'rejected';select * from student where applicationStatus =
'stageTwo' and sendEmail = 'false';",
(error, results) => {
if (error) [Link]("error in fectching database");
let studentRejected = results[2].length;
let studentApplied = results[0].length;
let studentSelected = results[1].length;
let pendingApplication = results[3].length;
[Link]("[Link]", {
studentApplied,
studentSelected,
studentRejected, pendingApplication
});
}
);

// [Link]([Link](__dirname, "./public/[Link]"));
});

[Link]("/student/pending", (req, res)=>{

[Link](
"select * from student where applicationStatus = 'stageTwo' and sendEmail
= 'false'; SELECT [Link] FROM mentor WHERE [Link] in (SELECT
[Link] FROM student WHERE [Link] =
'stageTwo' and sendEmail = 'false');",
(error, results) => {
if (error) [Link]("database error");
let studentList = results[0];
let mentorname = results[1];
[Link](mentorname)
[Link]("[Link]", { studentList, mentorname});
}
);
})

[Link]("/student/selected", (req, res) => {

[Link](
"select * from student where applicationStatus = 'selected' and sendEmail
= 'true';SELECT [Link] FROM mentor WHERE [Link] in (SELECT
[Link] FROM student WHERE [Link] =
'selected' and sendEmail = 'true');",
(error, results) => {
20

[Link]("/login", (req, res) => {

let { email, password } = [Link];
[Link](
"select password from authTable where email = ?",
[email],
(error, results) => {
if (error) [Link]("database error");
21

[Link](password);
[Link](results);
if (password == results[0].password) {
[Link](`/admin`);
} else {
alert("wrong password");
[Link]("/login");
}
}
);
});
[Link]("/select", (req, res) => {
let selectedEmails = [Link];
let mentorName = [Link];
[Link]([Link]);
let emailsArray = [Link](selectedEmails)
? selectedEmails
: [selectedEmails];
[Link]("Selected Emails:", selectedEmails);
[Link]("Selected mentor:", mentorName);
[Link]((email) => {
[Link](
"UPDATE student SET requestedTeacher = ? , applicationStatus =
'stageTwo' WHERE email = ?",
[mentorName, email],
(error, results) => {
if (error) [Link](200).send("error while udateing data" + error);
}
);
});
[Link]("/student");
});
[Link]("/sendEmail", (req, res) => {
[Link](
"select * from student where applicationStatus = 'selected' and sendEmail
= 'false'",
(err, results) => {
if (err) throw err;
let data = results;
[Link]("[Link]", { data });
}
);
});
[Link]("/sendEmail", (req, res) => {
let { email, mentoremail } = [Link];
[Link](email);
[Link](mentoremail);
let mailOptions = {
22

from: "madhavkumarchas@[Link]",
to: [Link],
subject: "conformation email of selection of internship in cimfr",
text: `your mentor email is ${[Link]} contact for more
info`,
};
[Link](mailOptions, (error, info) => {
if (error) [Link]("error in sending email");
[Link](
"update student set sendEmail = 'true' where email = ?",
[[Link]],
(error, results) => {
if (error) [Link]("database error");
[Link]("/sendEmail");
}
);
});
});
[Link]("/student/delete/:email", (req, res) => {
let { email } = [Link];
[Link](
"UPDATE student SET applicationStatus = 'rejected' WHERE email = ?",
[email],
(error, results) => {
if (error) {
[Link](error);
}
{
[Link](results);
[Link]("/student");
}
}
);
});
[Link]("/loginMentor", (req, res) => {
[Link]("loginMentor");
});
[Link]("/loginMentor", (req, res) => {
let { email, password } = [Link];
[Link](
"select password from mentor where email = ?",
[email],
(error, results) => {
if (error) [Link]("database error");
[Link](password);
[Link](results);
if (password == results[0].password) {
[Link](`/inmentor/${email}`);
23

} else {
alert("wrong password");
[Link]("/login");
}
}
);
});
[Link]("/student/:email", async (req, res) => {
let { email } = [Link];
[Link](email);
[Link]("select * from student where email=?", [email], (error, results) =>
{
if (error) {
[Link](error);
}
{
let student = results[0];
[Link](results);
[Link](student);
[Link]("[Link]", { student });
}
});
});

[Link]("/mentor", (req, res) => {

[Link]("select * from mentor", (error, results) => {
if (error) [Link]("error");
let mentors = results;
[Link]("[Link]", { mentors });
});
});
[Link]("/mentor/new", async (req, res) => {
let password = GenPassword(8);
[Link](
"insert into mentor (name, dept, email, mobileNo, password) values(?, ?,
?, ?, ?)",
[[Link], [Link], [Link], [Link],
password],
async (error, results) => {
if (error) [Link]("failed to insert");
let mailOptions = {
from: "madhavkumarchas@[Link]",
to: [Link],
subject: "login credentials of Application Portal",
text: `This is the password ${password} for your login on Application
portal`,
};
[Link](mailOptions, function (error, info) {
24

if (error) {
[Link](error);
[Link](
"delete from mentor where email=?",
[[Link]],
(error) => {
if (error) [Link]("database eror and transporter error");
}
);
[Link]("email error");
} else {
[Link]("Email sent: %s", [Link]);
[Link]("Message ID: %s", [Link]);
[Link]([Link]);
[Link]("email sent");
}
});
[Link](results);

[Link]("/mentor");
}
);
});
[Link]("/mentor/delete", (req, res) => {
[Link]([Link]);
let mentorEmail = [Link];
[Link](
"DELETE FROM mentor WHERE email=?",
[mentorEmail],
(error, results) => {
if (error) [Link]("error in database");
[Link]("/mentor");
}
);
});

[Link]("/inmentor/accept/:id/:email", (req, res) => {

let { id, email } = [Link];

[Link](
"update student set selectedMentorName=?, requestedTeacher = ? ,
applicationStatus = 'selected', where email= ?",
[email, null, id],
(error, results) => {
if (error) [Link]("database error");
}
);
[Link](`/inmentor/${email}`);
25

});
[Link]("/inmentor/delete/:id/:email", (req, res) => {
let { id, email } = [Link];
[Link](
"update student set applicationStatus = 'new', requestedTeacher = ? where
email = ?",
[null, id],
(error, results) => {
if (error) [Link]("database error");
[Link](`/inmentor/${email}`);
}
);
});

[Link](port, () => {
[Link](`Server running at [Link]
});

[Link]
const mysql = require("mysql2");

const db = [Link]({
host: "localhost",
user: "root",
password: "Ravi@123",
database: "mydb",
26

multipleStatements: true,
});
[Link]((err) => {
if (err) {
throw err;
}
[Link]("Connected to database");
});
[Link] = { db };

[Link]

const mysql = require("mysql2");

[Link]

const nodemailer = require("nodemailer");

const transporter = [Link]({
host: "[Link]",
port: 587,
secure: false, // true for 465, false for other ports
auth: {
user: "madhavkumarchas@[Link]",
pass: "*********"
},
});

[Link] = { transporter };
27

Views Folder
all [Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Student Applications</title>

<link
href="[Link]
[Link]"
rel="stylesheet"
/>
<style>
body {
padding: 20px;
}
.table th,
.table td {
border: 1px solid #dee2e6;
padding: 0.75rem;
text-align: left;
}
.table th {
background-color: #f2f2f2;
}
.btn-custom {
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
}
.btn-custom:hover {
background-color: #45a049;
}
.card {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3">
28

<div class="container">
<a class="navbar-brand" href="../admin">Dashboard</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="../sendEmail">Email</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../student">New Applications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../mentor">Mentor List</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-12">
<h2 class="mt-4">All Applications</h2>
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead class="thead-light">
<tr>
<th>Application Status</th>
<th>Full Name</th>
<th>Email</th>
<th>Branch</th>
<th>College Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% [Link](student => { %>
<tr>
29

Output
30

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Student Details</title>

<link
href="[Link]
[Link]"
rel="stylesheet"
/>
<style>
body {
margin: 20px;
}
.student-details {
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
max-width: 800px;
margin: auto;
}
.student-details img {
width: 150px;
height: 150px;
border-radius: 50%;
display: block;
margin: 0 auto 10px;
}
.student-details h2 {
text-align: center;
}
.student-details p {
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="student-details card">
<h5 class="card-title">Application NO. <%=[Link]
%></h5>
<div class="card-body">
<h2 class="card-title"><%= [Link] %></h2>
31

<div class="text-center">
<img src="../uploads/<%= [Link]( [Link]
).toString().replace("frontend\\public\\uploads\\", "") %>"
alt="Student Photograph" class="img-fluid mb-3" />
</div>
<div class="row">
<div class="col-md-6">
<p><strong>Father's Name:</strong> <%= [Link] %></p>
<p>
<strong>Date of Birth:</strong> <%=
[Link]() %>
</p>
<p><strong>Email:</strong> <%= [Link] %></p>
<p><strong>Gender:</strong> <%= [Link] %></p>
<p><strong>Category:</strong> <%= [Link] %></p>
<p>
<strong>Physically Disabled:</strong> <%=
[Link] %>
</p>
<p>
<strong>Certificate No:</strong> <%= [Link] %>
</p>
<p>
<strong>Mobile No:</strong> <%= parseInt([Link]) %>
</p>
<p>
<strong>Alternate Mobile No:</strong> <%=
parseInt([Link]) %>
</p>
<p>
<strong>Correspondence Address:</strong> <%=
[Link] %>
</p>
<p>
<strong>Permanent Address:</strong> <%=
[Link]
%>
</p>
<p><strong>Photo Id:</strong> <%= [Link] %></p>
</div>
<div class="col-md-6">
<p><strong>Marks (10th):</strong> <%= student.marks10th %></p>
<p><strong>Marks (12th):</strong> <%= student.marks12th %></p>
<p><strong>Percentage:</strong> <%= [Link] %></p>
<p><strong>Year and Sem:</strong> <%= [Link] %></p>
<p><strong>Branch:</strong> <%= [Link] %></p>
<p><strong>College Name:</strong> <%= [Link] %></p>
32

<p><strong>College Type:</strong> <%= [Link] %></p>

<p><strong>Duration:</strong> <%= [Link] %></p>
<p><strong>Achievements:</strong> <%= [Link]
%></p>
<p>
<strong>Other Qualifications:</strong> <%=
[Link] %>
</p>
<p>
<strong>Research Training:</strong> <%=
[Link]
%>
</p>
<p><strong>Domicile:</strong> <%= [Link] %></p>
</div>
</div>
<hr />
<div class="text-center">

<p><strong>Caste Certificate:</strong></p>
<img src="../uploads/<%= [Link]( [Link]
).toString().replace("frontend\\public\\uploads\\", "") %>"
alt="Caste Certificate" class="img-fluid mb-3" />
<p><strong>Physically Disabled Certificate:</strong></p>
<img src="../uploads/<%= [Link](
[Link]
).toString().replace("frontend\\public\\uploads\\", "") %>"
alt="Physically Disabled Certificate" class="img-fluid mb-3" />
</div>
<p>
<strong>LOR:</strong>
<a
href='../uploads/<%= [Link](
[Link]
).toString().replace("frontend\\public\\uploads\\", "") %>'
target="_blank"
class="btn btn-primary btn-sm"
>View PDF</a
>
</p>
<p>
<strong>Documents:</strong>
<a
href='../uploads/<%= [Link](
[Link]
).toString().replace("frontend\\public\\uploads\\", "") %>'
target="_blank"
33

class="btn btn-primary btn-sm"

>View PDF</a
>
</p>
<p>
<strong>Application Status:</strong> <%= [Link]
%>
</p>
</div>
</div>
</div>

Output

[Link]
<!DOCTYPE html>
<html>
<head>
<title>Student Mentor Table</title>

<link
rel="stylesheet"
href="[Link]
[Link]"
/>
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-header bg-primary text-white">
<h1 class="mb-0">Student Mentor Table</h1>
</div>
<div class="card-body">
35

<table class="table table-bordered table-striped">

<thead class="thead-dark">
<tr>
<th>Form Number</th>
<th>applicationStatus</th>
<th>Student Name</th>
<th>Mentor Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% [Link](function(item) { %>
<tr>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td>
<form action="/sendEmail" method="POST">
<input
type="hidden"
name="email"
value="<%= [Link] %>"
/>
<input
type="hidden"
name="mentoremail"
value="<%= [Link] %>"
/>
<button type="submit" class="btn btn-success">
Send Email
</button>
</form>
</td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</div>
</div>

Output

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Application Portal</title>
<link
rel="stylesheet"
href="[Link]
css"
/>
<link
href="[Link]
isplay=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Roboto", sans-serif;
37

font-weight: 400;
line-height: 1.6;
background-color: #f8f9fa;
}

.header {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

.header img {
max-width: 150px;
margin-bottom: 20px;
}

.header-content h1 {
font-size: 2.5rem;
font-weight: 700;
color: #333;
}

.navbar-brand {
font-weight: 700;
color: #4caf50 !important;
}

.navbar-nav .nav-link {
font-weight: 500;
font-size: 1.5rem;
color: #ffffff !important;
}

.navbar-nav .nav-link:hover {
color: #4caf50 !important;
}

.navbar-toggler {
border-color: #4caf50;
}

.navbar-toggler-icon {
color: #4caf50;
}
38

.card {
border: none;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s;
background-color: #ffffff;
text-decoration: none;
color: inherit;
}

.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-title {
color: #4caf50;
font-weight: 700;
font-size: 1.25rem;
}

.card-text {
color: #333;
font-weight: 500;
font-size: 2rem;
}

.footer {
background-color: #343a40;
color: white;
padding: 20px;
text-align: center;
margin-top: 40px;
}

.container {
margin-top: 40px;
}

.display-4 {
font-size: 2.5rem;
font-weight: 700;
}
</style>
</head>
<body>
<div class="container">
<img src="/images/[Link]" alt="CSIR-CIMFR" class="img-fluid" />
<header class="header">
39

<div class="header-content">
<h1 class="display-4">Application Portal</h1>
</div>
</header>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3">

<div class="container">
<a class="navbar-brand" href="#">Dashboard</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="./sendEmail">Email</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./student">New Applications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./mentor">Mentor List</a>
</li>
</ul>
</div>
</div>
</nav>

<div class="container mt-5">

<h2 class="text-center mb-4">Overview</h2>
<div class="row">
<div class="col-md-4 mb-4">
<a href="./student/applied" class="card">
<div class="card-body text-center">
<h5 class="card-title">Students Applied</h5>
<p class="card-text display-4"><%= studentApplied %></p>
</div>
</a>
</div>
<div class="col-md-4 mb-4">
<a href="./student/selected" class="card">
40

<div class="card-body text-center">

<h5 class="card-title">Students Selected</h5>
<p class="card-text display-4"><%= studentSelected %></p>
</div>
</a>
</div>
<div class="col-md-4 mb-4">
<a href="./student/rejected" class="card">
<div class="card-body text-center">
<h5 class="card-title">Students Rejected</h5>
<p class="card-text display-4"><%= studentRejected %></p>
</div>
</a>
</div>
<div class="col-md-4 mb-4">
<a href="./student/pending" class="card">
<div class="card-body text-center">
<h5 class="card-title">Pending Applicatinos</h5>
<p class="card-text display-4"><%= pendingApplication %></p>
</div>
</a>
</div>
</div>
</div>

<footer class="footer">
<div class="container">
<p>© 2024 Student Mentor App. All rights reserved.</p>
</div>
</footer>
</div>

Output

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Page</title>
<link
href="[Link]
[Link]"
rel="stylesheet"
/>
<style>
body {
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 1.2rem; /* Increased font size */
}
42

.card {
border: none;
border-radius: 1rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
padding: 2rem;
}

.card-header {
background-color: #fff;
border-bottom: none;
text-align: center;
font-size: 2rem; /* Increased font size */
margin-bottom: 1.5rem;
}

.card-body {
padding: 1.5rem;
}

.form-group label {
font-weight: bold;
}

.btn-primary {
background-color: #007bff;
border: none;
transition: background-color 0.3s;
}

.btn-primary:hover {
background-color: #0056b3;
}

.btn-secondary {
background-color: #6c757d;
border: none;
transition: background-color 0.3s;
}

.btn-secondary:hover {
background-color: #5a6268;
}

.text-center {
margin-top: 1rem;
43

font-size: 1rem; /* Increased font size */

}
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<h2>HRD Login</h2>
</div>
<div class="card-body">
<form method="POST" action="/login">
<div class="form-group">
<label for="email">Email address</label>
<input
type="email"
class="form-control"
id="email"
name="email"
placeholder="Enter email"
/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
class="form-control"
id="password"
name="password"
placeholder="Password"
/>
</div>
<button type="submit" class="btn btn-primary btn-
block">Login</button>
<a href="/loginMentor">Login As Mentor</a>
</form>
<div class="text-center">
<p>
Don't have an account?
<a href="/signup" class="btn btn-secondary">Sign Up</a>
</p>
</div>
</div>
</div>

Output

font-size: 1.2rem; /* Increased font size */

}

.card {
border: none;
border-radius: 1rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
padding: 2rem;
}

.card-header {
background-color: #fff;
border-bottom: none;
text-align: center;
font-size: 2rem; /* Increased font size */
margin-bottom: 1.5rem;
}

.card-body {
padding: 1.5rem;
}

.form-group label {
font-weight: bold;
}

.btn-primary {
background-color: #007bff;
border: none;
transition: background-color 0.3s;
}

.btn-primary:hover {
background-color: #0056b3;
}

.btn-secondary {
background-color: #6c757d;
border: none;
transition: background-color 0.3s;
}

.btn-secondary:hover {
background-color: #5a6268;
}
46

.text-center {
margin-top: 1rem;
font-size: 1rem; /* Increased font size */
}
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<h2>Login As Mentor</h2>
</div>
<div class="card-body">
<form method="POST" action="/loginMentor">
<div class="form-group">
<label for="email">Email address</label>
<input
type="email"
class="form-control"
id="email"
name="email"
placeholder="Enter email"
/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
class="form-control"
id="password"
name="password"
placeholder="Password"
/>
</div>
<button type="submit" class="btn btn-primary btn-
block">Login</button>
</form>
</div>
</div>

Output

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Student Applications</title>

<link
href="[Link]
[Link]"
rel="stylesheet"
/>
<style>
body {
padding: 20px;
}
.table th,
.table td {
border: 1px solid #dee2e6;
padding: 0.75rem;
text-align: left;
}
.table th {
background-color: #f2f2f2;
}
.btn-custom {
48

background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
}
.btn-custom:hover {
background-color: #45a049;
}
.card {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="mt-4">Student Applications</h2>
<div class="card">
<div class="card-body">
<div class="form-group">

<th>Application Status</th>
<th>Full Name</th>
<th>Email</th>
<th>Branch</th>
<th>College Name</th>
<th>View Application</th>
<th>Accept</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% [Link](student => { %>
<tr>

<td><%= [Link] %></td>

<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td>
49

<a
href="../student/<%= [Link] %>"
class="btn btn-custom btn-sm"
>View Application</a
>
</td>
<td>
<a
href="./accept/<%= [Link]
%>/<%=teacherEmail%>"
class="btn btn-custom btn-sm"
>Accept</a
>
</td>
<td>
<a
href="./delete/<%= [Link]
%>/<%=teacherEmail%>"
class="btn btn-custom btn-sm"
><i class="fas fa-trash-alt"></i>Delete</a
>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

Output

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mentors List</title>

<link
href="[Link]
css"
rel="stylesheet"
/>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4">Mentors List</h1>
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Department</th>
<th>Email</th>
<th>Mobile No</th>
<th>Action</th>
51

</tr>
</thead>
<tbody>
<% [Link](function(mentor) { %>
<tr>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td>
<form
action="/mentor/delete?_method=DELETE"
method="POST"
class="delete-form"
>
<input
type="hidden"
name="mentorEmail"
value="<%= [Link] %>"
required
/>
<button type="submit" class="btn btn-danger btn-sm">
<i class="fas fa-trash-alt"></i> Delete
</button>
</form>
</td>
</tr>
<% }); %>
</tbody>
</table>
<h2 class="text-center mt-5 mb-4">Add New Mentor</h2>
<form
action="/mentor/new"
method="POST"
class="needs-validation"
novalidate
>
<div class="form-group">
<label for="name">Name:</label>
<input
type="text"
class="form-control"
id="name"
name="name"
required
/>
<div class="invalid-feedback">Please enter the mentor's name.</div>
</div>
52

<div class="form-group">
<label for="dept">Department:</label>
<input
type="text"
class="form-control"
id="dept"
name="dept"
required
/>
<div class="invalid-feedback">Please enter the department.</div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input
type="email"
class="form-control"
id="email"
name="email"
required
/>
<div class="invalid-feedback">
Please enter a valid email address.
</div>
</div>
<div class="form-group">
<label for="mobileNo">Mobile No:</label>
<input
type="tel"
class="form-control"
id="mobileNo"
name="mobileNo"
required
/>
<div class="invalid-feedback">
Please enter a valid mobile number.
</div>
</div>
<button type="submit" class="btn btn-primary">Add New</button>
</form>
</div>

<script src="[Link]
<script
src="[Link]
></script>
<script
src="[Link]
ript>
53

Output

text-align: left;
}
.table th {
background-color: #f2f2f2;
}
.btn-custom {
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
}
.btn-custom:hover {
background-color: #45a049;
}
.card {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3">
<div class="container">
<a class="navbar-brand" href="../admin">Dashboard</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="../sendEmail">Email</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../student">New Applications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../mentor">Mentor List</a>
</li>
</ul>
</div>
55

</div>
</nav>
<div class="row">
<div class="col-12">
<h2 class="mt-4">Student Applications</h2>
<div class="card">
<div class="card-body">
<form action="/select" method="POST">
<div class="form-group">
<label for="mentorSelect">Select Mentor:</label>
<select
id="mentorSelect"
name="mentorName"
class="form-control"
>
<% [Link](mentor => { %>
<option value="<%= [Link] %>">
<%= [Link] %>
</option>
<% }) %>
</select>
</div>

<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead class="thead-light">
<tr>
<th>Select</th>
<th>Application Status</th>
<th>Full Name</th>
<th>Email</th>
<th>Branch</th>
<th>College Name</th>
<th>Action</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% [Link](student => { %>
<tr>
<td>
<input
type="checkbox"
name="selectedEmails"
value="<%= [Link] %>"
/>
</td>
<td><%= [Link] %></td>
56

<div class="row justify-content-center">

<div class="col-auto">
<button
type="submit"
class="btn btn-custom"
id="selectApplicantsButton"
>
Select Applicants
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

</html>

Output

}
.btn-custom {
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
}
.btn-custom:hover {
background-color: #45a049;
}
.card {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3">
<div class="container">
<a class="navbar-brand" href="../admin">Dashboard</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="../sendEmail">Email</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../student">New Applications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../mentor">Mentor List</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-12">
59

</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

Output

background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
}
.btn-custom:hover {
background-color: #45a049;
}
.card {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3">
<div class="container">
<a class="navbar-brand" href="../admin">Dashboard</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="../sendEmail">Email</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../student">New Applications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../mentor">Mentor List</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-12">
<h2 class="mt-4">Rejected Applications</h2>
<div class="card">
62

<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead class="thead-light">
<tr>
<th>Application Status</th>
<th>Full Name</th>
<th>Email</th>
<th>Branch</th>
<th>College Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% [Link](student => { %>
<tr>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td>
<a
href="../student/<%= [Link] %>"
class="btn btn-custom btn-sm"
>View Application</a
>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

Output

background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
}
.btn-custom:hover {
background-color: #45a049;
}
.card {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3">
<div class="container">
<a class="navbar-brand" href="../admin">Dashboard</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="../sendEmail">Email</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../student">New Applications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../mentor">Mentor List</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-12">
<h2 class="mt-4">Selected Applications</h2>
<div class="card">
65

<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead class="thead-light">
<tr>
<th>Application Status</th>
<th>Full Name</th>
<th>Email</th>
<th>Branch</th>
<th>College Name</th>
<th>Mentor</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% [Link]((student, index) => { %>
<tr>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= [Link] %></td>
<td><%= mentorName[index].name%></td>
<td>
<a
href="../student/<%= [Link] %>"
class="btn btn-custom btn-sm"
>View Application</a
>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

Output

CSS file
[Link]
body {
background-color: #f8f9fa;
}

.card {
margin-top: 50px;
}

[Link]
body {
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}

.header {
position: relative;
67

width: 100%;
overflow: hidden;
}

.header img {
width: 100%;
height: auto;
object-fit: cover;
}

.header-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
background: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 8px;
}

.header-content h1 {
margin: 0;
font-size: 2.5em;
}

.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}

.footer p {
margin: 0;
}
68

USER FORM

[Link]
const mysql = require("mysql2");
const express = require("express");
const app = express();
const multer = require("multer");
const path = require("path");
const {con} = require("./sql")
const { validateStudent, usedEmail } = require("./middleware");

[Link]([Link]());
[Link]([Link]({ extended: true }));
// [Link]("view engine", "ejs");
[Link]("views", [Link](__dirname, "views"));
// [Link]("ejs", ejsMate);
// [Link](methodOverride("_method"));
// [Link]([Link]())
[Link]([Link]([Link](__dirname, "/public")));

// [Link]("select * from student", function (err, result, fields) {

// if (err) {
// throw err;
// }
// [Link](result);
69

// [Link](fields);
// });

[Link]("/", (req, res) => {

[Link]([Link](__dirname, "./views/[Link]"));
});

[Link](
"/",
[Link]([
{ name: "disabledCertificate", maxCount: 1 },
{ name: "casteCertificate", maxCount: 1 },
{ name: "photograph", maxCount: 1 },
{ name: "lor", maxCount: 1 },
{ name: "documents", maxCount: 1 },
]),
validateStudent,
usedEmail,
async (req, res) => {
// [Link]("validated");
[Link]("entered");
let newStudent = [Link];
if ([Link] == undefined || [Link] == null)
{
[Link] = "notGiven";
}

if ([Link]) {
if ([Link]) {
let url = [Link][0].path;
[Link] = url;
} else {
[Link] = "notfound";
}
if ([Link]) {
let url = [Link][0].path;
[Link] = url;
} else {
[Link] = "notfound";
}
if ([Link]) {
let url = [Link][0].path;
[Link] = url;
} else {
[Link] = "notfound";
}
if ([Link]) {
let url = [Link][0].path;
70

[Link] = url;
} else {
[Link] = "notfound";
}
if ([Link]) {
let url = [Link][0].path;
[Link] = url;
} else {
[Link] = "notfound";
}
} else {
[Link] = "notfound";
[Link] = "notfound";
[Link] = "notfound";
[Link] = "notfound";
[Link] = "notfound";
}
let statement = `INSERT INTO student (fullname, fathername, dob, email,
gender, category, physicallyDisabled, certificateNo, mobileNo,
alternatemobileNo, correspondenceAddress, permanentAddress, marks10th,
marks12th, percentage, yearAndSem, branch, collegeName, collegeType, duration,
achievements, otherQualifications, researchTraining, domicile, photoId,
physicallyDisabliedCertificate, casteCertificate, photograph, lor,
documents, dateOfApply) VALUES
(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)`;

[Link](
statement,
[
[Link],
[Link],
[Link],
[Link],
[Link],
[Link],
[Link],
[Link],
[Link]([Link]),
[Link]([Link]),
[Link],
[Link],
[Link](newStudent.marks10th),
[Link](newStudent.marks12th),
[Link]([Link]),
[Link],
[Link],
[Link],
[Link],
71

[Link],
[Link],
[Link],
[Link],
[Link],
[Link],
[Link]([Link]),
[Link]([Link]),
[Link]([Link]),
[Link]([Link]),
[Link]([Link]),
[Link](),
],
(error, results) => {
if (error) throw error;
[Link]("success");
[Link](results);
}
);
[Link](newStudent);
[Link]([Link](__dirname, "./views/[Link]"));
}
);
[Link](8080, () => {
[Link]("app started listening");
});

[Link]
const JoiBase = require("joi");
const joi = [Link]((joi) => ({
type: "string",
base: [Link](),
messages: {
"[Link]": "{{#label}} should be less than or equal to 100",
"[Link]": "{{#label}} should be a number",
"[Link]": "{{#label}} should not be negative",
},
rules: {
maxNum: {
validate(value, helpers, args, options) {
const num = Number(value);
if (isNaN(num)) {
return [Link]("[Link]");
}
72

if (num > 100) {

return [Link]("[Link]", { limit: 100 });
}
if (num < 0) {
return [Link]("[Link]");
}
return value;
},
},
},
}));
[Link] = [Link]({
fullName: [Link]().required(),
fatherName: [Link]().required(),
dob: [Link]().isoDate().required(),
email: [Link]().email().required(),
gender: [Link]().valid("male", "female", "others").required(),
category: [Link]().valid("sc", "st", "obc", "ews",
"general").required(),
disability: [Link]().valid("yes", "no").required(),
mobile: [Link]().length(10).required(),
alternateMobileNo: [Link]().length(10).required(),
correspondenceAddress: [Link]().required(),
permanentAddress: [Link]().required(),
marks10th: [Link]().maxNum().required(),
marks12th: [Link]().maxNum().required(),
percentage: [Link]().maxNum().required(),
yearAndSem: [Link]().required(),
branch: [Link]().required(),
collegename: [Link]().required(),
college: [Link]().valid("govt", "non-govt", "other").required(),
duration: [Link]().required(),
achievements: [Link](),
otherQualifications: [Link](),
research: [Link](),
Domicile: [Link]().valid("Rural", "Urban").required(),
photoId: [Link]().required(),
});

[Link]
const { studentSchema } = require("./joiSchema");

const emailCheck = require("email-check");

const {con} = require("./sql")

[Link] = (req, res, next) => {

[Link]
const mysql = require('mysql2');

const con = [Link]({

host: 'localhost',
user: 'root',
password: 'Ravi@123',
database: 'mydb'
74

});
[Link](function (err) {
if (err) throw err;
[Link]("connected");
});

[Link] = {con};

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Application Form</title>
<link
href="[Link]
[Link]"
rel="stylesheet"
/>
<style>
.form-container {
margin: 20px;
}

.[Link] {
margin-bottom: 15px;
}

.form-check-inline {
margin-right: 10px;
}

.button {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 4rem;
}

body {
background: #f9f9f9;
display: flex;
75

justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
}

body::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 500px;
background: url("./images/[Link]") no-repeat center center;
background-size: contain;
opacity: 0.2;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
}

form {
background-color: #ffffff;
border: 5px solid #ccc;
min-width: 800px;
padding: 3rem;
margin: auto;
}

.preview-section {
display: none;
background-color: #ffffff;
border: 5px solid #ccc;
min-width: 800px;
padding: 3rem;
margin: auto;
margin-top: 20px;
}

.preview-image {
max-width: 100px;
max-height: 100px;
}

/* .image-container {
display: flex;
flex-wrap: wrap;
}
76

.image-container img {
max-width: 100px;
max-height: 100px;
margin: 10px;
} */
img {
max-width: 100%;
height: auto;
}

div[id^="imageContainer"] {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
.error {
font-weight: 700;
display: block;
color: #f00;
font-size: 14px;
}
#error-message {
display: none;
color: red;
font-size: 14px;
font-weight: 700;
}
.star {
color: #f00;
}
</style>
</head>

<body>
<div class="container">
<img src="./images/[Link]" alt="Cimfr logo" width="100%" />
</div>
<br />
<div class="container form-container">
<form
id="formvalidation"
name="formvalidation"
novalidate
action="./"
method="post"
enctype="multipart/form-data"
>
<h3 align="center"><u> Vocational Training Form </u></h3>
77

<br />
<br />
<p>
<b
>*VOCATIONAL TRAINING PROGRAMME APPLICATION FORM: Under-graduate
Courses in [Link]/B.E/Equivalent degree</b
><br />
Vocational training will be provided to students for a duration of
4(four) weeks to 8(eight) weeks only<br />
During (1) Summer Session: 01 May to 30 June (2) Winter Session: 01
December to 31 January next year<br />
<b
>Last Date to Apply:<br />
1> Summer Internship: 15th April<br />
2> Winter Internship: 15th November<br
/></b>
For Details Kindly Please visit <b>ACADEMICS</b> menu in the
<b>CSIR-CIMFR</b> website <a>([Link])</a><br />
<b
>*Note: A registration fee of RS.1000/- have to be deposited at
CSIR-CIMFR account by the selected candidate<br />
before the start of the training period.</b
>
</p>
<br />
<div id="inputElements">

<div class="form-group row">
<label for="fullName" class="col-sm-4 col-form-label"
>Full Name of Trainee<b class="star">*</b>:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="fullName"
placeholder="Enter your full name"
name="fullName"
value=""
required
/>
<span id="nameError" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="fatherName" class="col-sm-4 col-form-label"
>Father's Name<b class="star">*</b>:</label
>
78

<div class="col-sm-8">
<input
type="text"
class="form-control"
id="fatherName"
placeholder="Enter father's name"
value=""
name="fatherName"
required
/>
<span id="nameError1" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="dob" class="col-sm-4 col-form-label"
>Date of Birth<b class="star">*</b>:</label
>
<div class="col-sm-8">
<input
type="date"
class="form-control"
id="dob"
value=""
required
name="dob"
/>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-4 col-form-label"
>Email<b class="star">*</b>:</label
>
<div class="col-sm-8">
<input
type="email"
class="form-control"
id="email"
placeholder="Enter your email"
value=""
required
name="email"
/>
<span id="nameError2" class="error"></span>
<p id="error-message">Please enter a valid email address.</p>
</div>
</div>
<div class="form-group row">
<label for="gender" class="col-sm-4 col-form-label"
79

>Gender<b class="star">*</b>:</label
>
<div class="col-sm-8 d-flex align-items-center">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="gender"
id="male"
value="male"
required
/>
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="gender"
id="female"
value="female"
required
/>
<label class="form-check-label" for="female">Female</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="gender"
id="othersgender"
value="others"
required
/>
<label class="form-check-label" for="othersgender"
>Others</label
>
</div>
</div>
</div>
<div class="form-group row">
<label for="category" class="col-sm-4 col-form-label"
>Category<b class="star">*</b>:</label
>
<div class="col-sm-8">
<select class="form-control" id="category" name="category">
<option value="Select" required>Select</option>
<option value="sc">SC</option>
80

<option value="st">ST</option>
<option value="obc">OBC</option>
<option value="ews">EWS</option>
<option value="general">General</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label"
>Physically Disabled<b class="star">*</b>:</label
>
<div class="col-sm-8 d-flex align-items-center">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="disability"
id="yes"
value="yes"
required
/>
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="disability"
id="no"
value="no"
checked
required
/>
<label class="form-check-label" for="no">No</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="certificateNo" class="col-sm-4 col-form-label"
>Certificate No.<b class="star">*</b></label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="certificateNo"
placeholder="Enter certificate number"
disabled
81

value=""
default="notGiven"
required
name="certificateNo"
/>
<span id="nameError3" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="mobile" class="col-sm-4 col-form-label"
>Mobile No<b class="star">*</b>:</label
>
<div class="col-sm-8">
<input
type="number"
class="form-control"
id="mobile"
placeholder="Enter your mobile number"
value=""
required
name="mobile"
/>
<span id="nameError4" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="alternateMobile" class="col-sm-4 col-form-label">
Alternate No./Guardian No.<b class="star">*</b></label
>
<div class="col-sm-8">
<input
type="number"
class="form-control"
id="alternateMobile"
placeholder="Enter alternate mobile number"
value=""
required
name="alternateMobileNo"
/>
<span id="nameError5" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="correspondenceAddress" class="col-sm-4 col-form-label"
>Correspondence Address<b class="star">*</b>:</label
>
<div class="col-sm-8">
<input
82

type="text"
class="form-control"
id="correspondenceAddress"
placeholder="Enter correspondence address"
value=""
required
name="correspondenceAddress"
/>
<span id="nameError6" class="error"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4"></div>
<div class="col-sm-8">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="sameAddressCheckbox"
/>
<label class="form-check-label" for="sameAddressCheckbox"
>Same as Correspondence Address</label
>
</div>
</div>
</div>
<div class="form-group row">
<label for="permanentAddress" class="col-sm-4 col-form-label"
>Permanent Address<b class="star">*</b>:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="permanentAddress"
placeholder="Enter permanent address"
value=""
required
name="permanentAddress"
/>
<span id="nameError7" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="marks10th" class="col-sm-4 col-form-label"
>Percentage in 10th<b class="star">*</b>:</label
>
<div class="col-sm-8">
83

<input
type="number"
class="form-control"
id="marks10th"
placeholder=" Enter marks in percentage "
value=""
required
name="marks10th"
/>
<span id="nameError8" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="marks12th" class="col-sm-4 col-form-label"
>Percentage in 12th /Equivalent Degree<b class="star">*</b
>:</label
>
<div class="col-sm-8">
<input
type="number"
class="form-control"
id="marks12th"
placeholder="Enter marks in percentage"
value=""
required
name="marks12th"
/>
<span id="nameError9" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="percentage" class="col-sm-4 col-form-label"
>Percentage in Btech/B.E/Equivalent Degree<b class="star">*</b
>:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="percentage"
placeholder="Enter marks in percentage"
value=""
required
name="percentage"
/>
<span id="nameError10" class="error"></span>
</div>
</div>
84

<div class="form-group row">

<label for="year and semster" class="col-sm-4 col-form-label">
Year and Semester of BTECH/B.E/Equivalent Degree<b class="star"
>*</b
>:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="year"
placeholder="Enter year and Semester "
value=""
required
name="yearAndSem"
/>
<span id="nameError11" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="branch" class="col-sm-4 col-form-label"
>Branch/Stream<b class="star">*</b>:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="branch"
placeholder="Enter branch of engineering "
value=""
required
name="branch"
/>
<span id="nameError12" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="collegename" class="col-sm-4 col-form-label">
Name of the College/Universities<b class="star">*</b>:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="collegename"
placeholder="Enter Name of your college "
value=""
required
85

name="collegename"
/>
<span id="nameError13" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="college" class="col-sm-4 col-form-label"
>Weather the college/Institute/Universities<b class="star">*</b
>:</label
>
<div class="col-sm-8 d-flex align-items-center">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="college"
id="[Link]"
value="govt"
required
/>
<label class="form-check-label" for="govt"
>Government Academic Institution</label
>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="college"
id="[Link]"
value="non-govt"
required
/>
<label class="form-check-label" for="other"
>Non-Government Academic Institution</label
>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="college"
id="others"
value="other"
required
/>
<label class="form-check-label" for="other">Others</label
><input type="text" id="otherCollege" disabled />
86

</div>
</div>
</div>
<div class="form-group row">
<label for="Duration" class="col-sm-4 col-form-label">
Duration of Training requested (in months)<b class="star">*</b
>:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="Duration"
placeholder="Enter Duration Less than or equal to 2 Months"
value="1"
required
name="duration"
/>
<span id="nameError14" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="Prize" class="col-sm-4 col-form-label"
>Achievements (if any)/Prize/Medal/Other Award:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="Prize"
placeholder="Enter
Achievements/Scholarship/Prizes/Award/Distinction or Honor Won"
value=""
name="achievements"
/>
<span id="nameError15" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="Details" class="col-sm-4 col-form-label"
>Other Qualification(If Any):</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="Details"
placeholder="Enter Other Qualification Details "
87

value=""
name="otherQualifications"
/>
<span id="nameError16" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="Research" class="col-sm-4 col-form-label"
>Research Training(If Any):</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="Research"
placeholder="Enter Reaearch Training Details"
value=""
name="research"
/>
<span id="nameError17" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="Domicile" class="col-sm-4 col-form-label"
>Trainee Domicile(Rural/Urban)<b class="star">*</b>:</label
>
<div class="col-sm-8 d-flex align-items-center">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="Domicile"
value="Rural"
required
/>
<label class="form-check-label" for="govt">RURAL</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="Domicile"
value="Urban"
required
/>
<label class="form-check-label" for="other">URBAN</label>
</div>
</div>
88

</div>
<div class="form-group row">
<label for="PhotoID" class="col-sm-4 col-form-label"
>Photo ID NUMBER<b class="star">*</b>:</label
>
<div class="col-sm-8">
<input
type="text"
class="form-control"
id="PhotoID"
placeholder="Aadhar Number/PAN/Voter Id/Passport"
value=""
required
name="photoId"
/>
<span id="nameError18" class="error"></span>
</div>
</div>
<div class="form-group row">
<label for="fileInput1" class="col-sm-4 col-form-label"
>Physically Disabled Certificate:</label
>
<div class="col-sm-8">
<input
type="file"
class="form-control-file"
id="fileInput1"
accept="image/*"
name="disabledCertificate"
/>
<div id="error1" style="color: red"></div>
</div>
</div>
<div class="form-group row">
<label for="fileInput2" class="col-sm-4 col-form-label"
>Caste certificate:</label
>
<div class="col-sm-8">
<input
type="file"
class="form-control-file"
id="fileInput2"
accept="image/*"
name="casteCertificate"
/>
<div id="error2" style="color: red"></div>
</div>
</div>
89

<div class="form-group row">

<label for="fileInput3" class="col-sm-4 col-form-label"
>Upload your Photograph<b class="star">*</b>:</label
>
<div class="col-sm-8">
<input
type="file"
class="form-control-file"
id="fileInput3"
accept="image/*"
required
name="photograph"
/>
<div id="error3" style="color: red"></div>
</div>
</div>
<div class="form-group row">
<label for="fileInput4" class="col-sm-4 col-form-label"
>Letter of Recommendation(LOR)<br />from the head of the
Institute/College or from Training in charge addressed to
<b
>"The Director, CSIR-CIMFR,Barwa Road, Dhanbad"<b class="star"
>*</b
>:</b
></label
>
<div class="col-sm-8">
<input
type="file"
class="form-control-file"
id="fileInput4"
accept=".pdf"
required
name="lor"
/>
<div id="error4" style="color: red"></div>
</div>
</div>
<div class="form-group row">
<label for="fileInput5" class="col-sm-4 col-form-label"
>Kindly upload All documents Marksheet 10th Onwards
<b><u>One Single PDF</u></b> Format only<b class="star">*</b
>:</label
>
<div class="col-sm-8">
<input
type="file"
class="form-control-file"
90

id="fileInput5"
accept=".pdf"
required
name="documents"
/>
<div id="error5" style="color: red"></div>
</div>
</div>
<div class="button">
<button type="button" class="btn btn-primary" id="previewButton">
Preview
</button>

<button type="submit" class="btn btn-primary">Submit</button>

</div>
</div>

<div id="previewSection" class="preview-section">
<h3 align="center"><u> Preview Form Details </u></h3>
<div id="formPreview">
<p>
<strong>Physically Disabled Certificate:</strong
><img
id="imageContainer1"
style="max-width: 200px; max-height: 200px"
/>
</p>
<p>
<strong>Caste certificate:</strong
><img
id="imageContainer2"
style="max-width: 200px; max-height: 200px"
/>
</p>
<p>
<strong>Upload your Photograph:</strong
><img
id="imageContainer3"
style="max-width: 200px; max-height: 200px"
/>
</p>
<p>
<strong
>Letter of Recommendation(LOR)<br />from the head of the
Institute/College or from Training in charge addressed to
<b>"The Director, CSIR-CIMFR,Barwa Road, Dhanbad":</b></strong
><img
id="imageContainer4"
91

style="max-width: 200px; max-height: 200px"

/>
</p>
<p>
<strong
>Kindly upload All documents Marksheet 10th Onwards
<b><u>One Single PDF</u></b> Format only:</strong
><img
id="imageContainer5"
style="max-width: 200px; max-height: 200px"
/>
</p>
</div>
<div class="button">
<button type="button" class="btn btn-primary"
onclick="editForm()">
Edit
</button>
<button type="button" class="btn btn-success"
onclick="goToForm()">
Back
</button>
</div>
</div>
</form>
</div>

form_validation.js
$(document).ready(function () {
$("#formvalidation").submit(function (event) {
// Prevent the form from submitting
// [Link]();

// Validate each form field

var isValid = true;

// Example: Check if input field of full name of trainee is empty

if ($("#fullName").val() === "") {
$("#nameError").text("Please enter your name.");
isValid = false;
} else if ($("#fullName").val().length <= 3) {
$("#nameError").text("Name must be graeter than 3 characters");
isValid = false;
} else {
$("#nameError").text("");
}

// // Example: Check if input field of father name of trainee is empty

if ($("#fatherName").val() === "") {

$("#nameError1").text("Please enter your name.");
isValid = false;
} else if ($("#fatherName").val().length <= 3) {
$("#nameError1").text("Name must be graeter than 3 characters");
isValid = false;
} else {
$("#nameError1").text("");
}

// // Example: Check if input field of Email name of trainee is empty

var email = $("#email").val();

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if ($("#email").val() === "") {

$("#nameError2").text("Please enter email-id");
isValid = false;
} else if (![Link](email)) {
// [Link]();
$("#error-message").show();
isValid = false;
} else {
$("#error-message").hide();
}
94

// // Example: Check if input field of certificate number of trainee is

empty
let yes = [Link]("yes").val;
if (yes && $("#certificateNo").val() === "") {
$("#nameError3").text("Please enter your cerificate number");
isValid = false;
} else {
$("#nameError3").text("");
}

// // Example: Check if input field of mobile number of trainee is empty

if ($("#mobile").val() === "") {

$("#nameError4").text("Please enter your mobile number");
isValid = false;
} else if ($("#mobile").val().length <= 9) {
$("#nameError4").text("Mobile no. must be should 10 digit");
isValid = false;
} else if ($("#mobile").val().length > 10) {
$("#nameError4").text("Mobile [Link] not be greater than 10 digit");
isValid = false;
} else {
$("#nameError4").text("");
}

// // Example: Check if input field of Alternate mobile number of trainee

is empty

if ($("#alternateMobile").val() === "") {

$("#nameError5").text("Please enter your alternate mobile number");
isValid = false;
} else if ($("#alternateMobile").val().length <= 9) {
$("#nameError5").text("Mobile no. must be should 10 digit");
isValid = false;
} else if ($("#alternateMobile").val().length > 10) {
$("#nameError5").text("Mobile [Link] not be greater than 10 digit");
isValid = false;
} else {
$("#nameError5").text("");
}

// // Example: Check if input field of temproary address number of

trainee is empty

if ($("#correspondenceAddress").val() === "") {

$("#nameError6").text("Please enter your Temproary address");
isValid = false;
95

} else {
$("#nameError6").text("");
}

// // Example: Check if input field of permanent address number of

trainee is empty

if ($("#permanentAddress").val() === "") {

$("#nameError7").text("Please enter your permanent address");
isValid = false;
} else {
$("#nameError7").text("");
}

// // Example: Check if input field of marksin10th of trainee is empty

if ($("#marks10th").val() === "") {

$("#nameError8").text("Please enter your Marks");
isValid = false;
} else if ($("#marks10th").val() <= 0) {
[Link]([Link]("marks10th").val);
$("#nameError8").text("Percentage cannot less than zero ");
isValid = false;
} else if ($("#marks10th").val() >= 100) {
$("#nameError8").text("Percentage cannot greater than 100");
isValid = false;
} else {
$("#nameError8").text("");
}
// // Example: Check if input field of marks in 12th of trainee is
empty

if ($("#marks12th").val() === "") {

$("#nameError9").text("Please enter your Marks");
isValid = false;
} else if ($("#marks12th").val() < 0) {
$("#nameError9").text("Marks cannot less than zero ");
isValid = false;
} else if ($("#marks12th").val() > 100) {
$("#nameError9").text("Marks cannot greater than 100");
isValid = false;
} else {
$("#nameError9").text("");
}

// // Example: Check if input field of marks in BTECH of trainee is

empty
96

if ($("#percentage").val() === "") {

$("#nameError10").text("Please enter your Marks");
isValid = false;
} else if ($("#percentage").val() < 0) {
$("#nameError10").text("Marks cannot less than zero ");
isValid = false;
} else if ($("#percentage").val() > 100) {
$("#nameError10").text("Marks cannot greater than 100");
isValid = false;
} else {
$("#nameError10").text("");
}

// // Example: Check if input field of year and semester of trainee is

empty

if ($("#year").val() === "") {

$("#nameError11").text("Please enter your year along with semester");
isValid = false;
} else {
$("#nameError11").text("");
}

// // Example: Check if input field of branch of trainee is empty

if ($("#branch").val() === "") {

$("#nameError12").text("Please enter your Branch name");
isValid = false;
} else {
$("#nameError12").text("");
}

// // Example: Check if input field of collegeName of trainee is empty

if ($("#collegename").val() === "") {

$("#nameError13").text("Please enter your college name");
isValid = false;
} else {
$("#nameError13").text("");
}
// // Example: Check if input field of duration of trainee is empty

if ($("#Duration").val() === "") {

$("#nameError14").text(
"Please requested Training month less than or equal to 2 month"
);
isValid = false;
} else {
97

$("#nameError14").text("");
}
// // Example: Check if input field of collegeName of trainee is empty

if ($("#Prize").val() === "") {

$("#nameError15").text("Mention any achievements/prize/medals any won
");
isValid = false;
} else {
$("#nameError15").text("");
}
// // Example: Check if input field of collegeName of trainee is empty

if ($("#Details").val() === "") {

$("#nameError16").text("Please enter any other qualification you have");
isValid = false;
} else {
$("#nameError16").text("");
}
// // Example: Check if input field of collegeName of trainee is empty

if ($("#Research").val() === "") {

$("#nameError17").text("Enter any research details you have done
before");
isValid = false;
} else {
$("#nameError17").text("");
}

// // Example: Check if input field of collegeName of trainee is empty

if ($("#PhotoID").val() === "") {

$("#nameError18").text("Enter your photoID/Aadhar/PAN card details");
isValid = false;
} else {
$("#nameError18").text("");
}

let MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB

let MAX_IMAGE_SIZE = 100 * 1024;
let fileInput5 = $("#fileInput5")[0];
let errorDiv5 = $("#error5");
let fileInput4 = $("#fileInput4")[0];
let errorDiv4 = $("#error4");
let fileInput3 = $("#fileInput3")[0];
let errorDiv3 = $("#error3");
let fileInput2 = $("#fileInput2")[0];
let errorDiv2 = $("#error2");
98

let fileInput1 = $("#fileInput1")[0];

let errorDiv1 = $("#error1");

// physically disabled certificate

// Clear previous errors

[Link]("");

if ([Link] > 0) {
let file = [Link][0];

if ([Link] > MAX_IMAGE_SIZE) {

[Link]("Image size must be less than 100KB.");
isValid = false;
}
}

// caste certificate
[Link]("");

if ([Link] > 0) {
let file = [Link][0];

if ([Link] > MAX_IMAGE_SIZE) {

[Link]("Image size must be less than 100KB.");
isValid = false;
}
}
// photograph
[Link]("");

if ([Link] > 0) {
let file = [Link][0];

if ([Link] > MAX_IMAGE_SIZE) {

[Link]("Image size must be less than 100KB.");
isValid = false;
}
} else {
[Link]("File Required.");
isValid = false;
}

// file input lor

[Link]("");

if ([Link] > 0) {
let file = [Link][0];
99

if ([Link] > MAX_FILE_SIZE) {

[Link]("File size must be less than 2MB.");
isValid = false;
}
} else {
[Link]("File Required.");
isValid = false;
}

// file input documents

// Clear previous errors
[Link]("");

if ([Link] > 0) {
let file = [Link][0];

if ([Link] > MAX_FILE_SIZE) {

[Link]("File size must be less than 2MB.");
isValid = false;
}
} else {
[Link]("File Required.");
isValid = false;
}

if (!isValid) {
[Link]();
// alert("Please fill out all required fields."); // Alert if the form
is not valid
}
});
});

[Link]
document
.getElementById("sameAddressCheckbox")
.addEventListener("change", function () {
if ([Link]) {
[Link]("permanentAddress").value =
[Link]("correspondenceAddress").value;
} else {
[Link]("permanentAddress").value = "";
}
});
100

function getCheckedRadios(name) {
let radios = [Link](name);

for (let i = 0, length = [Link]; i < length; i++) {

if (radios[i].checked) {
return radios[i].value;
}
}

return null;
}

const yesRadio = [Link]("yes");

const noRadio = [Link]("no");
const certificateNoInput = [Link]("certificateNo");
const disable = [Link]("fileInput1");
const toggleCertificateInput = () => {
[Link] = ![Link];
[Link] = ![Link];
};
[Link]("change", toggleCertificateInput);
[Link]("change", toggleCertificateInput);

toggleCertificateInput();
const others = [Link]("others");
const govt = [Link]("[Link]");
const nongovt = [Link]("[Link]");
const otherCollege = [Link]("otherCollege");
const toggleCollege = () => {
[Link] = ![Link];
};
[Link]("change", toggleCollege);
[Link]("change", toggleCollege);
[Link]("change", toggleCollege);
toggleCollege();

[Link]("DOMContentLoaded", function () {
const previewButton = [Link]("previewButton");

[Link]("click", function () {
let fullName = [Link]("fullName").value;
let fatherName = [Link]("fatherName").value;
let dob = [Link]("dob").value;
let email = [Link]("email").value;
let gender = getCheckedRadios("gender");
let category = [Link]("category").value;
let disability = getCheckedRadios("disability");
let certificateNo = [Link]("certificateNo").value;
101

let mobile = [Link]("mobile").value;

let alternateMobile = [Link]("alternateMobile").value;
let correspondenceAddress = [Link](
"correspondenceAddress"
).value;
let permanentAddress = [Link]("permanentAddress").value;
let marks10th = [Link]("marks10th").value;
let marks12th = [Link]("marks12th").value;
let percentage = [Link]("percentage").value;
let year = [Link]("year").value;
let branch = [Link]("branch").value;
let collegename = [Link]("collegename").value;
let collegeType = getCheckedRadios("college");
let Duration = [Link]("Duration").value;
let Prize = [Link]("Prize").value;
let Details = [Link]("Details").value;
let Research = [Link]("Research").value;
let domicile = getCheckedRadios("Domicile");
let PhotoID = [Link]("PhotoID").value;

// content
let previewContent = `
<p><strong>Full Name of Trainee:</strong> ${fullName}</p>
<p><strong>Father's Name:</strong> ${fatherName}</p>
<p><strong>Date of Birth:</strong> ${dob}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Gender:</strong> ${gender}</p>
<p><strong>Category:</strong> ${category}</p>
<p><strong>Disability:</strong> ${disability}</p>
<p><strong>Certificate No.:</strong> ${certificateNo}</p>
<p><strong>Mobile No:</strong> ${mobile}</p>
<p><strong>Alternate No./Guardian No.:</strong> ${alternateMobile}</p>
<p><strong>Correspondence Address:</strong> ${correspondenceAddress}</p>
<p><strong>Permanent Address:</strong> ${permanentAddress}</p>
<p><strong>Percentage in 10th:</strong> ${marks10th}</p>
<p><strong>Percentage in 12th:</strong> ${marks12th}</p>
<p><strong>Percentage in
Btech/B.E/Equivalent Degree:</strong> ${percentage}</p>
<p><strong> Year and Semester of BTECH/B.E/Equivalent
Degree:</strong> ${year}</p>
<p><strong>Branch/Stream:</strong> ${branch}</p>
<p><strong>Name of the College/Universities:</strong> ${collegename}</p>
<p><strong>Weather the college/Institute/Universities:</strong>
${collegeType}</p>
<p><strong>Duration of Training requested (in
months):</strong> ${Duration}</p>
<p><strong>Achievements (if any)/Prize/Medal/Other
Award:</strong> ${Prize}</p>
102

<p><strong>Other Qualification(If Any):</strong> ${Details}</p>

<p><strong>Research Training(If Any):</strong> ${Research}</p>
<p><strong>Trainee Domicile</strong> ${domicile}</p>
<p><strong>Photo ID NUMBER:</strong> ${PhotoID}</p>
`;

[Link]("formPreview").innerHTML =
previewContent + [Link]("formPreview").innerHTML;
// [Link]("smart").[Link] = 'block';/
[Link]("previewSection").[Link] = "block";
[Link]("inputElements").[Link] = "none";
});
});

const innertext = `<p><strong>Physically Disabled Certificate:</strong><img

id="imageContainer1"
style="max-width: 200px; max-height: 200px;"></p>
<p><strong>Caste certificate:</strong><img id="imageContainer2"
style="max-width: 200px; max-height: 200px;"></p>
<p><strong>Upload your Photograph:</strong><img id="imageContainer3"
style="max-width: 200px; max-height: 200px;"> </p>
<p><strong>Letter of Recommendation(LOR)<br>from the head of
the Institute/College or from Training in charge addressed to <b>"The
Director, CSIR-CIMFR,Barwa
Road, Dhanbad":</b></strong><img id="imageContainer4"
style="max-width: 200px; max-height: 200px;"></p>
<p><strong>Kindly upload All documents Marksheet 10th Onwards
<b><u>One Single PDF</u></b> Format only:</strong><img id="imageContainer5"
style="max-width: 200px; max-height: 200px;"></p>`;

const editForm = () => {

[Link]("previewSection").[Link] = "none";
[Link]("formPreview").innerHTML = innertext;
[Link]("inputElements").[Link] = "block";
};

const goToForm = () => {

[Link]("previewSection").[Link] = "none";
[Link]("formPreview").innerHTML = innertext;
[Link]("inputElements").[Link] = "block";
};

const imageInput1 = [Link]("fileInput1");

const previewImage1 = [Link]("imageContainer1");
function previewSelectedImage1() {
const file = [Link][0];
if (file) {
const reader = new FileReader();
103

[Link](file);
[Link] = function (e) {
[Link] = [Link];
};
}
}
[Link]("change", previewSelectedImage1);

[Link]("change", previewSelectedImage4);

[Link]
{
"dependencies": {
"ejs": "^3.1.10",
"ejs-mate": "^4.0.0",
"email-check": "^1.1.0",
"express": "^4.19.2",
"fs": "^0.0.1-security",
"joi": "^17.13.1",
"method-override": "^3.0.0",
"multer": "^1.4.5-lts.1",
"mysql2": "^3.9.8",
"nodemailer": "^6.9.13",
"nodemon": "^3.1.1"
}
}

Setup

update mysql password in [Link], [Link], frontend/[Link].

change email pass in frontend/[Link].
npm install in terminal.
105

REFERENCE

W3 SCHOOL

JAVA POINT
BOOTSTRAP

Industrial Training Report on Web Development
No ratings yet
Industrial Training Report on Web Development
29 pages
Project Report on Google GeminiOS
No ratings yet
Project Report on Google GeminiOS
58 pages
Sridhar
No ratings yet
Sridhar
70 pages
PHP MySQL Summer Training Report
No ratings yet
PHP MySQL Summer Training Report
28 pages
Web Development Internship Report
No ratings yet
Web Development Internship Report
41 pages
Animesh Thakurdocx
No ratings yet
Animesh Thakurdocx
51 pages
Nidhi Singh Rajput
No ratings yet
Nidhi Singh Rajput
28 pages
Frontend Development Internship Report
No ratings yet
Frontend Development Internship Report
39 pages
Web Development Training Report
No ratings yet
Web Development Training Report
22 pages
Alka Meena's Internship Report on Web Dev
No ratings yet
Alka Meena's Internship Report on Web Dev
23 pages
Samyu Web
No ratings yet
Samyu Web
45 pages
Web Development Internship Report
No ratings yet
Web Development Internship Report
46 pages
Internship Report on Web Development
No ratings yet
Internship Report on Web Development
81 pages
Web Development Lab Project Report
No ratings yet
Web Development Lab Project Report
23 pages
DIT Website Project Report
No ratings yet
DIT Website Project Report
65 pages
Internship Report by Shiva Sahu
No ratings yet
Internship Report by Shiva Sahu
41 pages
Web Development Seminar at Bharat Intern
No ratings yet
Web Development Seminar at Bharat Intern
18 pages
Front Page
No ratings yet
Front Page
70 pages
435752048-Web-Development-Report IT (IV)
No ratings yet
435752048-Web-Development-Report IT (IV)
29 pages
Internship Report 2025 Shubh
No ratings yet
Internship Report 2025 Shubh
29 pages
Web Development Training Report
No ratings yet
Web Development Training Report
53 pages
Mern Stack Development Training Report
No ratings yet
Mern Stack Development Training Report
19 pages
Industrial Training in Web Development
No ratings yet
Industrial Training in Web Development
55 pages
Man Nat Sharma
No ratings yet
Man Nat Sharma
51 pages
Report For Web Development
No ratings yet
Report For Web Development
16 pages
Industrial Training Report Format
No ratings yet
Industrial Training Report Format
15 pages
Rajeev 01
No ratings yet
Rajeev 01
37 pages
Naveen
No ratings yet
Naveen
31 pages
Kuhu 2
No ratings yet
Kuhu 2
28 pages
Dipendar Final 2 New
No ratings yet
Dipendar Final 2 New
23 pages
Job Portal Development Report
No ratings yet
Job Portal Development Report
24 pages
Web Development Training Report
No ratings yet
Web Development Training Report
49 pages
Summer Internship Report on College Website Development
No ratings yet
Summer Internship Report on College Website Development
26 pages
Website Development for DIT Project
No ratings yet
Website Development for DIT Project
65 pages
Nitte Web Development Final
No ratings yet
Nitte Web Development Final
35 pages
Web Development Internship Report
No ratings yet
Web Development Internship Report
33 pages
Astha Lab File
No ratings yet
Astha Lab File
43 pages
Mini Project Report on Web Development
91% (11)
Mini Project Report on Web Development
20 pages
Web Development Internship Report
No ratings yet
Web Development Internship Report
6 pages
Frontend Project
No ratings yet
Frontend Project
44 pages
Astha Yadav Lab Report
No ratings yet
Astha Yadav Lab Report
43 pages
Web Technology Training Report by Sagar Kasana
No ratings yet
Web Technology Training Report by Sagar Kasana
18 pages
Rajeev 02
No ratings yet
Rajeev 02
37 pages
Internship Report on Web Development
No ratings yet
Internship Report on Web Development
68 pages
Practical Training I Report
No ratings yet
Practical Training I Report
34 pages
Anant STP Report
No ratings yet
Anant STP Report
35 pages
Industrial Training Report Format
No ratings yet
Industrial Training Report Format
17 pages
Prerna
No ratings yet
Prerna
51 pages
Nishippt
No ratings yet
Nishippt
28 pages
Sonal01.docx 20251112 183716 0000
No ratings yet
Sonal01.docx 20251112 183716 0000
75 pages
Summer Internship at Web Tech Patna
No ratings yet
Summer Internship at Web Tech Patna
18 pages
Web Development Internship Report
No ratings yet
Web Development Internship Report
34 pages
Invigo Educare: Web Development Training Report
No ratings yet
Invigo Educare: Web Development Training Report
17 pages
A Report of Two Weeks Industrial Training: Sigma Services
No ratings yet
A Report of Two Weeks Industrial Training: Sigma Services
40 pages
Web Development Project Report
No ratings yet
Web Development Project Report
26 pages
Intenship Final Report 1
No ratings yet
Intenship Final Report 1
53 pages
Summer Internship in Web Development
No ratings yet
Summer Internship in Web Development
16 pages
EMP-50/51 Projector Service Manual
100% (1)
EMP-50/51 Projector Service Manual
83 pages
Dr. B. Vijaya, Dept of English, Osmania University, Brief Profile
No ratings yet
Dr. B. Vijaya, Dept of English, Osmania University, Brief Profile
2 pages
CTFA 1Y0-240 Exam Overview and Insights
No ratings yet
CTFA 1Y0-240 Exam Overview and Insights
41 pages
Covid-19 Reopening Plan for Scoil Naomh Pádraig
No ratings yet
Covid-19 Reopening Plan for Scoil Naomh Pádraig
7 pages
3D Geometry Problems and Solutions
No ratings yet
3D Geometry Problems and Solutions
7 pages
Research Methods for Agribusiness Students
No ratings yet
Research Methods for Agribusiness Students
79 pages
Maximal Covering Location-Allocation Model
No ratings yet
Maximal Covering Location-Allocation Model
16 pages
Impact of Home Life on Student Success
No ratings yet
Impact of Home Life on Student Success
3 pages
PhDThesis BurianiF
No ratings yet
PhDThesis BurianiF
181 pages
Trading 212 Risk Disclosure Overview
No ratings yet
Trading 212 Risk Disclosure Overview
38 pages
Enhancing Load Forecasting with ANN
No ratings yet
Enhancing Load Forecasting with ANN
16 pages
Thai Undocumented Workers in Korea
No ratings yet
Thai Undocumented Workers in Korea
16 pages
Acetaminophen Active Learning Template
No ratings yet
Acetaminophen Active Learning Template
1 page
Organic Peroxides Overview
No ratings yet
Organic Peroxides Overview
4 pages
Filipino Character: Strengths and Weaknesses
No ratings yet
Filipino Character: Strengths and Weaknesses
4 pages
Social Science Test Blueprint IX 2024-25
No ratings yet
Social Science Test Blueprint IX 2024-25
2 pages
JNVU BA Semester Time Table 2025-26
No ratings yet
JNVU BA Semester Time Table 2025-26
9 pages
Sales Management Plan for Cindy's Bakery
No ratings yet
Sales Management Plan for Cindy's Bakery
4 pages
Mastering the Golf Performance Zone
No ratings yet
Mastering the Golf Performance Zone
2 pages
Module 3
No ratings yet
Module 3
3 pages
Grade 3 English Lesson Plan on Nouns
No ratings yet
Grade 3 English Lesson Plan on Nouns
5 pages
Management of Watermelon Bud Necrosis
No ratings yet
Management of Watermelon Bud Necrosis
2 pages
QCloud: Scalable Public Cloud in Pakistan
No ratings yet
QCloud: Scalable Public Cloud in Pakistan
16 pages
JC Series Ball Bearing Hinges Guide
No ratings yet
JC Series Ball Bearing Hinges Guide
2 pages
Vocabulary and Reading Exercises Level 2
No ratings yet
Vocabulary and Reading Exercises Level 2
11 pages
70-Year-Old Graduates With Art Degree
No ratings yet
70-Year-Old Graduates With Art Degree
3 pages
Surface Tension and Capillary Action
No ratings yet
Surface Tension and Capillary Action
7 pages
Antimicrobial Chemotherapy Part 2
No ratings yet
Antimicrobial Chemotherapy Part 2
27 pages
WFC 62 Releasenotes
No ratings yet
WFC 62 Releasenotes
32 pages
P3 Math Revision: CA1-3 Exam Guide
No ratings yet
P3 Math Revision: CA1-3 Exam Guide
4 pages