A PRELIMENERY REPORT ON

“ Blood Donation System ”

SUBMITTED TO THE SAVITRIBAI PHULE PUNE UNIVERSITY,
PUNE IN THE PARTIAL FULFILLMEN TO FTHEREQUIREMENTS
FOR THE A WARD OF THE DEGREE OF

BACHELOR OF ENGINEERING (COMPUTER ENGINEERING)

SUBMITTED BY
Vidya Ramhari Ghule

Roll No:- 3215

DEPARTMENT OF COMPUTER ENGINEERING

VIDYA PRASARINI SABHA’S COLLEGE OF ENGINEERINGAND
TEVHNOLOGY, LONAVALA.
SAVITRIBAI PHULE PUNE UNIVERSITY

2022-2023

1
 CERTIFICATE

This is to certify that the project report entitles

“Blood Donation System ”:

Submitted by,

Vidya Ramhari Ghule

Roll No:-3215

Are bonafide students of this institute and the work has been carried out by them under the
supervision of Prof. Priti Chorade and it is approved for the partial fulfillment of the requirement
of Savitribai Phule Pune University, for the award of the degree of Bachelor of
Engineering(Computer Engineering).

(Prof. Priti Chorade) (Prof. Soni Ragho )

Guide Head
Department of Computer Engineering Department of Computer Engineering

(Dr.Manav A. Thakur)
Principal,
VPS CET, LONAVALA

Place:
Date:

2
 ACKNOWLEDGEMENT

The present world of competition there is a race of existence in which those are
having will to come or ward succeed. Project is like a bridge between theoretical and
practical working. With this willing we joined this particular project. First of all, we
would like to thank the supreme power the Almighty God who is obviously the one
has always guide to work on the right path of life.

We sincerely thank Prof. Soni Ragho Head of the Department of

Computer Science of V.P.S. College of Engineering, for all the facilities provided to
us in the pursuit of this project. We are indebted to our project guide Prof. Priti
Chorade Department of Computer Science of V.P.S College of Engineering. We
feel it’s a pleasure to be indebted to our guide for his valuable support, advice and
encouragement and we think him for his superb and constant guidance towards this
project. We are deeply grateful to all the staff members of CS department, for
supporting us in all aspects.We acknowledge our deep sense of gratitude to our loving
parents for being a constant source of inspiration and motivation.

3
 Index

Sr. No Name of Activity Page No

1 Introduction 4

2 Objective 4
3 Tool Used 5
4 Methedology 6
5 Sourse Code 7
6 Conclusion 15
7 References 16

4
 INTRODUCTION

In today's digital era, businesses require an effective online presence to reach a wider
audience and provide their services or products efficiently. This mini project aims to
develop a dynamic web application to meet the specific requirements of a business.

Objectives

Design and develop a dynamic web application using web development technologies.
Implement business functionality to showcase the application's purpose. Create an
interactive and user-friendly interface for seamless user experience. Utilize the
knowledge gained from previous assignments to incorporate best practices and
techniques.

4
 Tool Used

Software Requirements -

 Software’s used :- VS Code

 Operating system :- We have chosen Windows 10 operating

system

 Data :- Photos and Gifs

Hardware Requirements -

 Processor :- Pentium or Higher

 RAM :- 8 GB

 Hard Disk :- 500 GB

 Input Device :- Keyboard, Mouse

5
 Methedology

Requirement Gathering:
Analyzing the specific requirements of an online marketplace, including user
roles, product management, search functionality, and secure transactions.

Design Phase:
Creating wireframes and mockups to visualize the layout and structure of the
web application.
Designing a database schema to efficiently store and retrieve product
information, user details, and transaction records.

Development Phase:
Implementing the front-end using HTML, CSS, and JavaScript to create an
interactive and visually appealing user interface.
Utilizing a suitable back-end programming language (such as Python, PHP,
or JavaScript) to handle server-side processing and database interactions.
Integrating payment gateways or APIs for secure payment processing.
Implementing user authentication and authorization mechanisms.

Testing Phase:
Conducting comprehensive testing to ensure the functionality and usability
of the web application.
6
Performing security testing to identify and address any vulnerabilities. Fixing
any bugs or issues identified during the testing phase.

Deployment:
Deploying the web application on a suitable hosting platform, ensuring
scalability, reliability, and security.
Configuring appropriate server infrastructure to handle expected traffic and
data storage.

7
 Sourse Code

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="index.css">

<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<title>Restaurant Website</title>
</head>
<body>

<nav>
<ul class="nav-flex-row">
<li class="nav-item">
<a href="#about">About</a>
</li>
<li class="nav-item">
<a href="#reservation">Reservation</a>
</li>
<li class="nav-item">
<a href="#menu">Menu</a>
</li>
<li class="nav-item">
<a href="#shop">Shop</a>
</li>
</ul>
</nav>
<section class="section-intro">
<header>
<h1>Fooddddie</h1>
</header>
<div class="link-to-book-wrapper">
<a class="link-to-book" href="#reservations">Book a table</a>
</div>
</section>
<section class="about-section">
<article>
<h3>
Section for the text why your restaurant is the best.
</h3>
<p>
8
 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
A quos, voluptatum illum mollitia dolores libero placeat
nesciunt quasi adipisci impedit!Lorem ipsum dolor sit,
amet consectetur adipisicing elit.
A quos, voluptatum illum mollitia dolores libero placeat
nesciunt quasi adipisci impedit!
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
A quos, voluptatum illum mollitia dolores libero placeat
nesciunt quasi adipisci impedit!Lorem ipsum dolor sit.
</p>
</article>
</section>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/rachel-park-hrlvr2ZlUNk-unsplash.jpg" class="d-block w-100"
alt="food">
</div>
<div class="carousel-item">
<img src="img/lily-banse--YHSwy6uqvk-unsplash.jpg" class="d-block w-100" alt="food">
</div>
<div class="carousel-item">
<img src="img/brooke-lark-aGjP08-HbYY-unsplash.jpg" class="d-block w-100"
alt="food">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container">
<div class="row-flex">
<div class="flex-column-form">
<h3>
Make a booking
</h3>
<form class="media-centered">
<div class="form-group">
<p>
Please leave your number we will call to make a reservation
</p>
<input type="name" class="form-control" id="exampleInputName1" aria-
describedby="nameHelp" placeholder="Enter your name">
</div>
<div class="form-group">
<input type="number" class="form-control" id="exampleInputphoneNumber1"
placeholder="Enter your phone number">
</div>
<button type="submit" class="btn btn-primary">Submit</button>

9
 </form>
</div>
<div class="opening-time">
<h3>
Opening times
</h3>
<p>
<span>Monday—Thursday: 08:00 — 22:00</span>
<span>Friday—Saturday: 09:00 — 23:00 </span>
<span>Sunday: 10:00 — 17:00</span>
</p>
</div>
<div class="contact-adress">
<h3>
Contact
</h3>
<p>
<span>000 9283 8456</span>
<span>15 Florida Ave</span>
<span>Palo-Alto, 1111 CA</span>
</p>
</div>
</div>
</div>
<!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-

q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>

</body>

</html>

CSS :
@import
url('https://fonts.googleapis.com/css?family=Big+Shoulders+Text:100,300,400,500,600,700,800
,900&display=swap');

/* font-family: 'Big Shoulders Text', cursive; */

.nav-flex-row {
display: flex;
flex-direction: row;
justify-content: center;
1
0
 position: absolute;
z-index: 100;
left: 0;
width: 100%;
padding: 0;
}
.nav-flex-row li {
text-decoration: none;
list-style-type: none;
padding: 20px 15px;
}
.nav-flex-row li a {
font-family: 'Big Shoulders Text', cursive;
color: #ffffff;
font-size: 1.5em;
text-transform: uppercase;
font-weight: 300;
}
.section-intro {
height: 820px;
background-image: url(img/petr-sevcovic-qE1jxYXiwOA-unsplash.jpg);
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.section-intro h1 {
text-align: center;
color: #ffffff;
font-size: 4em;
font-weight: 700;
}
.section-intro header {
display: flex;
flex: 4;
flex-direction: row;
justify-content: center;
align-items: center;
}
.link-to-book-wrapper {
flex: 1;
}
.about-section {
display: flex;
align-items: center;
background-color: #f3f3f3c0;
padding: 50px 30px;
}
.link-to-book {
color: #ffffff;
display: block;
border: 2px solid #ffffff;
padding: 5px 10px;
}
a.link-to-book:hover {
1
1
 background-color: #ffffff;
color: #95999e;
text-decoration: none;
}
.about-section p,
.about-section h3 {
text-align: center;
width: 60%;
margin: auto;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.8em;
text-transform: uppercase;
}
.carousel-inner {
height: 700px;
}
.row-flex {
display: flex;
flex-direction: row;
}
.flex-column-form {
display: flex;
flex-direction: column;
flex: 1;
margin: 30px 20px;
}
.btn.btn-primary {
font-family: 'Big Shoulders Text', cursive;
color: #ffffff;
background-color: #95999e;
text-transform: uppercase;
font-size: 16px;
padding: 5px 10px;
letter-spacing: 2px;
border: 0;
}
.btn.btn-primary:hover {
background-color: #747474;
}
.opening-time,
.contact-adress {
flex: 1;
margin: 30px 20px;
font-size: 1.2em;
}
.form-group p {
font-size: 1.2em;
}
.opening-time p span,
.contact-adress p span {
display: block;
}
@media (min-width:577px) and (max-width: 800px) {
.section-intro {
height: 500px;
}
1
2
 .about-section p,
.about-section h3 {
font-size: 20px;
}
.carousel-inner {
height: auto;
}
.row-flex {
display: flex;
flex-direction: column;
}
}
@media screen and (max-width: 576px) {
.section-intro {
height: 300px;
}
.about-section {
padding: 30px;
}
.section-intro h1 {
font-size: 2em;
}
.about-section p,
.about-section h3 {
font-size: 15px;
}
.carousel-inner {
height: auto;
}
.row-flex {
display: flex;
flex-direction: column;
}
.row-flex h3 {
font-size: 25px;
text-align: center;
}
.form-group p {
font-size: 15px;
}
.opening-time p span,
.contact-adress p span {
font-size: 15px;
text-align: center;
}
}

1
3
Output :

1
4
 Conclusion

The design and implementation of a dynamic web application for an online

marketplace showcased the effective utilization of web development
technologies. This project provided hands-on experience in gathering
requirements, designing, developing, testing, and deploying a functional and
user-friendly web application.

By successfully completing this project, a solid foundation in web development

has been established, enabling the individual to tackle more complex and
advanced projects in the future..

1
5
 References

1. "Real-time object detection and tracking for video surveillance" by Kyungnam Kim, Taehee
Jeong, and Jaeseok Yun (IEEE International Conference on Systems, Man, and Cybernetics,
2017).
2. "A survey on moving object detection and tracking in video surveillance" by R. Sivakumar and
K. M. Mahadevan (International Journal of Advanced Research in Computer and
Communication Engineering, 2017).
3. "Object detection and tracking for video surveillance systems" by Haiping Lu and Jie Zhou
(Journal of Applied Mathematics, 2013).
4. "A comparative study of moving object detection and tracking algorithms for video
surveillance systems" by Hany Elgammal, David Harwood, and Larry Davis (IEEE
Transactions on Pattern Analysis and Machine Intelligence, 2002).
5. "Moving object detection and tracking in video surveillance systems: a review" by Nazar
Hussain and Asmatullah Chaudhry (Artificial Intelligence Review, 2018).
6. "Object detection and tracking for video surveillance using deep learning: a comprehensive
review" by A. L. Shanmugam, A. S. S. Krishna, and S. Jayaraman (Journal of Ambient
Intelligence and Humanized Computing, 2021).
7. "Moving object detection and tracking for video surveillance: a comprehensive survey" by N.
P. Karthikeyan, P. Venkatesan, and V. Balamurugan (Journal of Ambient Intelligence and
Humanized Computing, 2020).
8. "Video surveillance systems for moving object detection and tracking: a review" by F. Gao, J.
Xiong, and H. Lu (Journal of Sensors, 2018).

1
6