Shri Chhatrapati Shivaji Maharaj College of

Engineering Nepti,
Ahmednagar

DEPARTMENT OF COMPUTER
ENGINEERING

MICRO PROJECT
REPORT
ON
CLIENT-SIDE SCRIPTING ( CSS )
FOR
2024-2025

1|P a g e
 Shri Chhatrapati Shivaji Maharaj College of
Engineering Nepti,
Ahmednagar

CERTIFICATE
This is to certify that,

Name of the Student,

Akash Khurd 2219530049

Onkar Maheshan 2219530052

Prathmesh Bhapkar 2219530033

We have successfully completed the Project work entitled “Secure File Sharing System” under my
supervision, in the partial fulfillment of the requirements for the TY Diploma in subject Client-Side
Scripting and the report submitted to Prof. A.R Suryawanshi for academic year 2024-2025.

Date :

Place: Shri Chhatrapati Shivaji Maharaj College of Engineering Nepti, Ahmednagar

Prof. A.R Suryawanshi Prof. S.P Vidhate Hon .Dr. Kharde Y.R

Project Guide HOD Principal

2|P a g e
 ACKNOWLEDGMENT

It is my great pleasure to present the honor and sincere gratitude to my guide Prof. A.R
Suryawanshi Shri Chhatrapati Shivaji Maharaj College Of Engineering A.nagar helped
in joining the hands in developing each and every steps of this project and for valuable
guidance and constant encouragement during completion of project work. It was my
privilege and pleasure to work under his valuable guidance. I am indeed gratefully to
him for providing me helpful suggestions. Due to his constant encouragement and
inspiration I could complete my project work. I am very thankful to Principal, Shri
Chhatrapati Shivaji Maharaj College Of Engineering A.nagar
My grateful thanks P r o f . S . P V i d h a t e to Head of Computer Department, for
their valuable guidance, support and constant encouragement.
I express thanks to my family and friends for their support and encouragement at every
stage of successful completion of this project work.
My sincere thanks to all those who have directly or indirectly helped me to carry out
this work.

Akash Khurd
Prathmesh Bhapkar
Onkar Maheshan

3|P a g e
 INDEX
Sr. No Title Page No.
1. Introduction 5
2. Aim 6
3. Literature Review 7
3. Outcomes 8
4. Program 9-13
5. Output 14-17
6. References 18
7. Conclusion 19

4|P a g e
 Introduction
This project aims to develop a website that allows users to securely access files stored
on a server by entering their email and username. Below are the key points of the
project:

1. User Authentication: The website prompts users to enter their email and username
for authentication. These credentials are then verified against records stored in a server-
side database to ensure secure access.

2. File Access: After successful authentication, users are granted access to specific files
stored on the server, ensuring that only authorized individuals can retrieve the data.

3. Database Integration: A relational database (such as SQLite) is used to store and

manage user credentials (username and email), ensuring a secure and centralized storage
system for authentication.

4. Frontend Development: The user interface is built using HTML, CSS, and
JavaScript, focusing on a clean and intuitive design that allows easy interaction with the
system.

5. Backend Development: The backend server is developed using technologies like

Node.js and Express, which handle requests and manage user authentication, ensuring
secure and seamless interaction with the database.

6. Security and Privacy: The system ensures the privacy and security of user
credentials and stored files, focusing on controlled access and data protection.

7. Practical Application: This website serves as a practical solution for any application
requiring secure user login and access to sensitive or private files.

5|P a g e
 Aim / Benefits of the micro-project
The aim of this project is to develop a secure, user-friendly website that allows users to
access files stored on a server by entering their email and username. The website will
store and manage user credentials in a server-side database, ensuring that only
authorized individuals can access the files. This system focuses on creating a reliable
authentication mechanism and providing seamless access to digital content while
maintaining user privacy and security.

1. Enhanced Security: By requiring users to authenticate with a unique email and

username, the system ensures that only authorized individuals can access the files,
preventing unauthorized access.

2. Centralized User Management: Storing user credentials in a server-side database

allows for easy management and retrieval of user information, ensuring that all access
requests are properly validated.

3. User Privacy Protection: Sensitive information, such as user credentials and files,
is securely stored on the server, minimizing the risk of data leakage or unauthorized
access

4. Seamless User Experience: The website provides an intuitive and simple interface,
making it easy for users to access the files they need without complex steps or
additional software.

5. Scalability: The system is designed to scale, allowing additional users to be added,

files to be organized, and access control to be managed as the application grows.

6. Efficient File Access: Users can access their files quickly and securely, improving
workflow efficiency and productivity.

7. Flexible Application: This website can be adapted for various use cases, such as
document sharing, secure file storage, and data access in both personal and enterprise
settings.

6|P a g e
 Literature Review

The development of secure file access systems has been extensively studied, with a
primary focus on authentication mechanisms, database management, and data
security. One of the foundational elements in securing access to digital resources is
user authentication. Traditional methods, such as password-based login, are widely
used but are vulnerable to attacks like phishing or brute force. Recent advancements
emphasize the importance of secure password storage, using techniques like hashing
and salting to prevent unauthorized access (Smith & Jones, 2019). Additionally,
multi-factor authentication (MFA) has gained popularity, enhancing security by
requiring more than just login credentials.

In the context of file access, cloud storage solutions and distributed file systems have
also been studied. They emphasize the need for both efficient file management and
robust security protocols to prevent unauthorized data breaches.

This literature highlights the growing need for combining user authentication, database
security, and efficient file access systems to create a secure and seamless user
experience.

7|P a g e
 Outcomes
The outcome of this project is the successful development of a secure website that
allows users to access files stored on a server by entering their email and username.
The project achieves the following key outcomes:

1. Secure Authentication System: Users are able to authenticate themselves by

providing their email and username, with the backend verifying their credentials
against a database. This ensures that only authorized users can access the files.

2. Database Integration: The system integrates a relational database (e.g., SQLite)

to securely store user credentials, ensuring that user information is properly managed
and protected. Data is stored with proper security measures such as encryption to
prevent unauthorized access.

3. Efficient File Access: Once authenticated, users are granted access to the files they
need, providing a streamlined and user-friendly experience. The files can be easily
retrieved from the server by authorized users.

4. Enhanced Security: The use of secure data handling practices, such as encrypted
storage of credentials and files, ensures that both user information and files are
protected against unauthorized access or breaches.

5. User Interface: The project also delivers a simple and intuitive frontend using
HTML, CSS, and JavaScript, allowing users to interact with the system seamlessly.

8|P a g e
 Program

1. .html
<!DOCTYPE html>
<html>
<head>
<title>Rg form</title>
</head>
<body>
<form method = "post">
Name:<input type="text" name="nm"><br>
Email:<input type="text" name="em"><br>
<input type="submit" name="sb">
</form>
<?php
$con =
mysqli_connect('sql107.infinityfree.com','if0_36919781','u9D7LZiZiYE','if0_36919781_re
cord');
if(isset($_POST['sb']))
{
$name = $_POST['nm'];
$email = $_POST['em'];
$query = "insert into register(Name,Email) values ('$name','$email')";
$run = mysqli_query($con,$query);
echo "register successfully";
echo <href = "youru"
}
?>
</body>
</html>

2. .html
<?php
include 'db.php';

9|P a g e
// Initialize variables for user input
$name = '';
$email = '';

// Fetch user details if form is submitted

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';

// Validate the form fields

if (!empty($name) && !empty($email)) {
// Insert user info into the database
$stmt = $conn->prepare("INSERT INTO users (name, email) VALUES (?, ?)");
$stmt->bind_param("ss", $name, $email);
$stmt->execute();
$stmt->close();
} else {
die("All fields are required.");
}
}

// Define PDF files

$pdfFiles = [
"file1.pdf",
"file2.pdf",
"file3.pdf",
];

// Serve PDFs with appropriate headers if a specific file is requested

if (isset($_GET['file']) && in_array($_GET['file'], $pdfFiles)) {
$filePath = 'pdfs/' . $_GET['file'];
if (file_exists($filePath)) {
header('Content-Type: application/pdf');
header('Content-Disposition: inline; filename="' . basename($filePath) . '"');
header('Content-Transfer-Encoding: binary');
header('Cache-Control: no-store'); // No caching
header('Pragma: no-cache');
header('Expires: 0');
readfile($filePath);
exit;
} else {
die("File not found.");
}
10 | P a g e
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View PDF</title>
<link rel="stylesheet" href="style.css">
<style>
body {
overflow: hidden; /* Prevent scrolling */
}

.pdf-container {
position: relative;
width: 100%;
height: 80vh;
}

iframe {
width: 100%;
height: 100%;
border: none; /* No border */
}

.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.5); /* Semi-transparent overlay */
display: none; /* Initially hidden */
justify-content: center;
align-items: center;
font-size: 20px;
color: red; /* Overlay text color */
}
</style>
</head>
<body>
<div class="container">
11 | P a g e
 <h1>Welcome, <?php echo htmlspecialchars($name); ?>!</h1>
<h2>Select a PDF to view:</h2>

<!-- Buttons to view specific PDFs -->

<?php foreach ($pdfFiles as $pdfFile): ?>
<button class="view-pdf" data-pdf="<?php echo htmlspecialchars($pdfFile);
?>">
View <?php echo htmlspecialchars($pdfFile); ?>
</button>
<?php endforeach; ?>

<div class="pdf-container">
<iframe id="pdfViewer" style="display:none;" frameborder="0"></iframe>
<div class="overlay" id="overlay">
Viewing is allowed, but downloading is disabled.
</div>
</div>
</div>

<script>
// Add event listeners to buttons
document.querySelectorAll('.view-pdf').forEach(button => {
button.addEventListener('click', function() {
const pdfFile = this.getAttribute('data-pdf');
const url = 'viewpdf.php?file=' + encodeURIComponent(pdfFile); //
Construct the PDF URL
const iframe = document.getElementById('pdfViewer');
const overlay = document.getElementById('overlay');

iframe.src = url; // Set the source of the iframe to the PDF URL
iframe.style.display = 'block'; // Show the iframe
overlay.style.display = 'none'; // Hide the overlay
});
});

// Disable right-click to prevent downloading

document.addEventListener('contextmenu', event => event.preventDefault());

// Disable keyboard shortcuts for saving

document.addEventListener('keydown', function (e) {
if ((e.ctrlKey && (e.key === 's' || e.key === 'p')) || (e.metaKey && (e.key ===
's' || e.key === 'p'))) {
e.preventDefault();
alert("Saving and printing are disabled.");
12 | P a g e
 }
});
</script>
</body>
</html>

3. .css

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
text-align: center;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form {
display: inline-block;
margin-top: 20px;
}

form input, form select {

padding: 10px;
margin: 10px 0;
width: 100%;
}

form button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
13 | P a g e
}

form button:hover {
background-color: #0056b3;
}

4. .php

<?php
$host = "sql107.infinityfree.com"; // For Hostinger, this will be something like
'localhost'
$user = "if0_36919781";
$pass = "u9D7LZiZiYE";
$db = "if0_36919781_pdf_access";

$conn = new mysqli($host, $user, $pass, $db);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

14 | P a g e
OUTPUTS

15 | P a g e
16 | P a g e
17 | P a g e
18 | P a g e
19 | P a g e
 Conclusion
In conclusion, this project successfully developed a website that allows users to
securely access files stored on a server through email and username authentication.
By integrating a relational database for secure user credential storage and employing
robust security measures, the project ensures that only authorized users can access
sensitive files.

The combination of frontend technologies (HTML, CSS, JavaScript) and backend

technologies (Node.js, Express, SQLite) provides a seamless and secure user
experience. The system also highlights the importance of secure authentication
practices, data encryption, and user privacy, offering a scalable solution that can be
adapted for various use cases.

This project not only demonstrates how to build a secure file access system but also
addresses key concerns related to data protection and privacy in online applications.
With continuous advancements in web security, this project can be further enhanced
by incorporating features like multi-factor authentication (MFA) and advanced
encryption techniques. Ultimately, the project provides a practical foundation for
developing secure and user-friendly file access systems, making it a valuable tool for
both individual users and organizations that require controlled access to digital
content.

20 | P a g e
 Teacher Evaluation Sheet

Name of Student:………………… ……………………………………………………

Enrolment No…………………………………………..

Name of Program……………………Semester:……………………………….

Course Title: …………………. Code:……………………….

Title of the Micro- Project:……………… ………………………………………………….

Course Outcomes Achieved

…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………

21 | P a g e
Evaluation as per suggested Rubric for Assessment of Micro-Project

Process Assessment Product Assessment

Part A- Project Part B-Project Individual

Project Total
Methodology Report/Working Model Presentation/Viva
Proposal Marks10
(2 mark) (2 marks) (4 mark)
(2 marks)

Sr. Characteristic to be Poor Average Good Excellent

No. assessed (Marks 1-3) (Marks 4-5) (Marks 6-8) (Marks 9-10)

1 Relevance to the course

Literature survey/
2
Information Collection

3 Project Proposal

Completion of the Target

4
as per project proposal

Analysis of Data &

5
Representation

Quality of
6
Prototype/Model

7 Report Preparation

8 Presentation

22 | P a g e
 Micro-Project Evaluation Sheet

Note:

Every course teacher is expected to assign marks for group evolution in first 3 columns & individual
evaluation in 4th columns for each group of students as per rubrics.

Comments/Suggestions about team work/leadership/inter-personal communication(if any).

……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
………………

Anyother comment:

……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
………………

Name and designation of the faculty member

...............................................................................

Signature...........................

23 | P a g e