Design Project
Design Project
AN AUTONOMOUS INSTITUTION
COIMBATORE – 641010
PROJECT REPORT
20IT901
B.TECH IT
STAFF IN CHARGE
COURSE CONTENT:
PLATFORMS:
• HTML,CSS
• Java Script
• Star UML
COURSE OUTCOME:
COI :Ability to describe the principles of product design and development In solving
engineering problems.
REFERENCES:
1. Gay, Greg et al. Web Accessibility for Developers, Ryerson University Pressbooks, 2019.
MARK EVALUATION:
(15)
Ex.No.1
ONLINE BOOK STORE
AIM
I.PROBLEM STATEMENT
The online bookstore faces several challenges related to its operations, customer
experience, and competition. These challenges include: The online bookstore
needs to manage its inventory efficiently, keeping track of stock levels, product
availability, and order fulfilment. This can be challenging, especially during peak
seasons or when there are unexpected demand spikes. Customers expect a
seamless experience when browsing and purchasing books online. The online
bookstore needs to ensure that its website is easy to navigate, search, and filter
products. Additionally, it must offer various payment options, shipping methods,
and customer support channels.
1 Introduction
1.1 Purpose
5
1.2 Product Scope
This project’s scope is to create and implement a website for the bookstore. This
system is designed to provide automation support for the process of placing books
for sale on the Internet and facilitating the actual sale.
2. Overall Description
The online bookstore should be easy for customers to navigate and find the books
they are looking for. Customers should be able to easily search for books using
keywords, filters, and other criteria. Customers should be able to read reviews
and ratings of books to help them make informed purchasing decisions.
6
2.2.1 Browse and search for books
Customers should be able to browse and search for books by title, author, genre,
and other criteria.
Customers should be able to add items to their virtual shopping cart as they
shop on the website.
2.2.3 Checkout
Customers should be able to view their past orders and track the status of
their current orders.
• Casual shoppers: These users browse the online bookstore occasionally and
make small purchases. They may not have an account on the website and
may not be familiar with all of its features.
• Regular Customers: These users have an account on the website and make
regular purchases. They are familiar with the website's features and may
use the search and browsing capabilities frequently.
• Heavy Users: These users spend a lot of time on the website, regularly
purchase multiple items and may take advantage of the personalized
recommendations.
• Administrators: These users are responsible for managing the online
bookstore's inventory, processing orders, and providing customer service.
7
They have access to the back-end of the system and use it to perform tasks
such as updating prices and removing out-of-stock items.
The online bookstore may have to comply with certain laws and regulations
related to e-commerce, data privacy, and online transactions. It may have a
deadline for when it needs to launch or a specific release date to meet. It needs to
be able to handle a large number of customers and transactions.
Memory : 4GB
8
4. System Features
1. Authentication
2. Stock Details
4. Payment Details
5. Report generation
III.UML DIAGRAMS
9
2. Class Diagram:-
3. Sequence Diagram:-
10
4. State chart diagram:-
5. Activity diagram:-
11
6. Component Diagram :-
7. Deployment diagram:-
12
8. Package diagram:-
13
padding: 0; }
header { background-color:
#F5A623; color: black;
padding: 30px;
font-weight: bold;
text-align: center;
} nav {
background-color: #0000ff;
color: #fff; padding: 10px
0; text-align: center;
} nav a {
color: black; text-
decoration: none;
margin: 0 10px;
}
nav a:hover { text-
decoration: underline;
} section {
padding: 20px;
text-align: center;
}
.book { display:
inline-block; margin:
50px;
} footer {
background-color: #000080;
color: black;
font-size:20px;
padding: 10px 0;
text-align:right-side;
position: static;
bottom: 10px; width:
100%;
}
14
</style>
</head>
<body>
<header>
<h1>SHAN BOOKS </h1>
<h1>Welcome to Our Bookstore </h1>
</header>
<nav>
<a href="C:\Users\Rohit\Desktop\dp1\ex1.html">Home</a>
<a href="C:\Users\Rohit\Desktop\dp1\reg.html">Registration</a>
<a href="C:\Users\Rohit\Desktop\dp1\cart.html">My cart</a>
<a href="C:\Users\Rohit\Desktop\dp1\pay.html">Payment</a>
</nav>
<section>
<h2>Featured Books</h2>
<div class="book">
<h3>Python programming</h3>
<p>Author: Jasmine Pythia</p>
<img src="book1.jpg" alt="Book 1">
<p>Description: Python Programming Course From Basic</p>
<p>To Advance Level Please Download a Pdf File and
Make You To A</p>
<p>Professional Python Developer Or Freelancer.</p>
</div>
<div class="book">
<h3>C++ course</h3>
<p>Author: Maximillon Codeborne</p>
<img src="book2.jpg" alt="Book 2">
<p>Description: Advance C++ Course in Simple English Language</p>
<p>Please Download A Pdf From Here and Gain Your
Knowledge in C++</p>
</div>
<div class="book">
<h3>Machine learning</h3>
15
<p>Author: Elias Dataforge</p>
<img src="book3.jpg" alt="Book 3">
<p>Description:Advance Machine learning Course From Pdf File </p>
<p>Please Download This File From Here and You</p>
<p>Have From Zero To Hero In Machine learning.</p>
</div>
<div class="book">
<h3>Cloud computing</h3>
<p>Author: Luna Cloudweaver</p>
<img src="book4.jpg" alt="Book 3">
<p>Description:This Is A Book For Cloud computing. Beginner</p>
<p>Friendly all Things need for beginners there in pdf book mentioned</p>
<p>please Download and gain knowledge about Cloud
computing.</p>
</div>
</section>
<script>
</script>
<footer class="bg-dark py-3">
<div class="container">
<div class="row ">
<div class="col-md-6 text-light">
<h5>About Us</h5>
<p>We are an online bookstore offering a wide selection of books for all ages
and interests.</p>
</div>
<div class="col-md-3 text-light">
<h5>Contact</h5>
<ul class="list-unstyled">
<li><a href=" mailto:[email protected]">Gmail</a></li>
<li><a href="tel:+918879004874">Phone</a></li>
<li><a href="https://maps.app.goo.gl/QNQ95q6arqKdRxWf9"
target="_blank">GPS Location</a>
<p>51,RKK nagar, NK palayam ,Singanallur,Coimbatore ,Tamil Nadu-
16
641033</p>
</li>
</ul>
</div>
</div
</div>
</footer>
</body>
</html>
Reg.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6J
Xm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG
5KkN" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q
" crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-
17
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl
" crossorigin="anonymous"></script>
<script src="form-validation.js"></script>
</head>
<style>
h1{
background-color: #F5A623;
color: #fff;
padding: 20px; text-
align: center;
}
</style
<body>
<h1 class="text-center">SHAN BOOKS</h1>
<div class="container">
<h2>Register</h2>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
ariadescribedby="nameHelp" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email"
ariadescribedby="emailHelp" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="email">Phone no</label>
<input type="number" class="form-control" id="number"
ariadescribedby="number" placeholder="Enter your number">
</div>
<div class="form-group">
<label for="email">Bookname and Author</label>
18
<input type="text" class="form-control" id="text" aria-describedby="text"
placeholder="Enter Bookname & Author">
</div>
<div class="form-group">
<label for="email">Billing address</label>
<input type="text" class="form-control" id="text" aria-describedby="text"
placeholder="Enter your address">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</html>
19
SCREENSHOTS Home page
20
My cart page
Payment page
21
CONCLUSION
22
Ex.No.2
HEALTH MONITORING SYSTEM
AIM
I.PROBLEM STATEMENT
1 Introduction
1.1 Purpose
23
1.2 Product Scope
The product scope of a health monitoring system refers to the boundaries and
features of the system that are included in its design and development. The
product scope outlines what the system will do and what it will not do.
2. Overall Description
The product perspective of a health monitoring system describes how the system
fits into the larger context of healthcare and technology.
24
2.2 Product Functions
The system should collect data from various sources, such as wearables, medical
devices, and mobile apps, to track an individual's health parameters, such as heart
rate, blood pressure, and activity level.
The system should analyse the collected data to identify trends, patterns,
and abnormalities in an individual's health status. This can help individuals and
healthcare providers make informed decisions about their health and wellbeing.
The system should provide real-time feedback to individuals to help them make
healthier choices and improve their health parameters. For example, the system
may provide reminders to take medication, exercise, or drink more water.
25
• Caregivers: Caregivers, such as family members or healthcare
professionals, may also use a health monitoring system to track the health
status of their loved ones or patients. Caregivers may have different user
characteristics than individuals, such as medical knowledge, access to
medical devices, and communication skills.
• Healthcare Providers: Healthcare providers, such as doctors or nurses,
may use a health monitoring system to monitor the health status of their
patients remotely and provide personalized recommendations. Healthcare
providers may have different user characteristics than individuals or
caregivers, such as medical training, access to electronic health records,
and regulatory compliance knowledge.
Health monitoring systems can have various general constraints that affect
their design, development, and deployment. It must comply with privacy and
security regulations to protect users' personal health information (PHI) from
unauthorized access, use, or disclosure. It must be compatible with various
hardware, software, and network systems to ensure seamless data collection,
analysis, and sharing.
26
worn on the body, such as smartwatches or fitness trackers. Wearables can
include various UI elements, such as touchscreens, buttons, and haptic
feedback.
• Mobile Apps: Many health monitoring systems provide a mobile app as
the primary user interface. Mobile apps allow users to access the system's
features and functions on their mobile devices, such as smartphones or
tablets. Mobile apps can include various UI elements, such as menus,
buttons, forms, and charts.
Memory : 4GB
4. System Features
1. Home
2. Dashboard
3. About
4. Contact
III.UML DIAGRAMS
27
1. Use case Diagram:-
2. Class Diagram:-
28
3. Sequence Diagram:-
29
5. Activity Diagram:-
6. Component Diagram:-
30
7. Deployment Diagram:-
SOURCE CODE
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Health Monitoring System</title>
<style>
body {
background-image:url('https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSRz7dF9OPrws2dRsOzhZGDUoUN5r2QwUTdSg
&s');
background-size:1500px 900px;
31
}
header {
background-
image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAk
//9k=);
background-size: 1500px 900px;
background-repeat:no-repeat;
background-position: center;
color: white;
padding: 20px;
text-align: center;
}
.container {
max-width: 1200px;
margin: 0 auto; padding:
20px;
}
h1 {
text-align: center; margin-
bottom: 30px;
}
.service {
background-image:url('https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQBjstNgeHEz8kRNuIG7ShL70WCoJzJYVGumQ&
s');
background-size:900px 700px;
margin-bottom: 50px;
padding: 20px; background-
color: #fff; border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
32
}
.service img {
max-width: 100%;
height: auto; border-
radius: 0px; margin-
bottom: 0px;
}
.service h2 {
text-align: center;
}
.service p {
text-align: center;
}
p{
font-size:20px;
font-weight:bold;
color: black;
footer {
background-color: #000080;
color: black;
font-size:30px;
padding: 10px 0;
text-align:right-side;
position: static;
bottom: 10px; width:
100%;
33
</style>
<header>
</head>
<body>
<h1>Welcome to Health Monitoring System</h1>
</header>
<div class="container">
<div class="service">
<img src="C:/Users/Rohit/Desktop/dp4/ptm.jpg" alt="Patient Monitoring">
<h2>Patient Monitoring</h2>
<p>Our patient monitoring system tracks vital signs, detects anomalies, and
alerts medical staff of any concerning changes in patients' conditions.</p> </div>
<div class="service">
<img src="C:/Users/Rohit/Desktop/dp4/eqgs.jpg" alt="Equipment Maintenance">
<h2>Equipment Maintenance</h2>
<p>We ensure that all medical devices are regularly inspected, calibrated, and
maintained to the highest standards.</p>
</div>
<div class="service">
<img src="C:/Users/Rohit/Desktop/dp4/pda.jpg" alt="Data Analytics">
<h2>Data Analytics</h2>
<p>We collect and analyze healthcare data to provide actionable insights for hospital
administrators and medical staff.</p>
</div>
</div>
<footer class="bg-dark py-3">
<div class="container">
<div class="row ">
<div class="col-md-3 text-light">
34
<h5>About</h5>
<ul class="list-unstyled">
<li><a href=" C:/Users/Rohit/Desktop/dp4/home4.html">Login</a></li>
<li><a href="
C:/Users/Rohit/Desktop/dp4/cont4.html">Contact</a></li>
</ul>
</div>
</div
</div>
</footer>
</body>
</html>
Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Health Monitoring System</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0; padding: 0;
background-color: #f2f2f2;
}
.container {
max-width: 1200px; margin:
0 auto;
padding: 20px;
35
} h1 { text-
align: center; margin-
bottom: 30px;
}
.login-form { max-width: 400px;
margin: 0 auto; background-color:
#fff; padding: 20px; border-
radius: 8px; box-shadow: 0 0 10px
rgba(0,0,0,0.1);
}
.login-form h2 { margin-
bottom: 20px; text-align:
center;
}
.login-form input[type="text"],
.login-form input[type="password"] {
width: 100%; padding: 10px;
margin-bottom: 20px; border: 1px
solid #ccc; border-radius: 4px;
box-sizing: border-box;
}
.login-form input[type="submit"]
{ width: 100%;
background-color: #4caf50;
color: #fff; padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
} button{
background-color: #45a049;
text-align: center;
padding:10px; font-size:20px;
}
36
.login-form p {
text-align: center;
}
.image-container {
display: flex; justify-
content: center; margin-
top: 50px;
}
.image-container img {
width: 300px;
height: auto; margin:
0 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Health Monitoring System</h1>
<div class="login-form">
<h2>Patient Login</h2>
<form action="#" method="post">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<a href="C:\Users\Rohit\Desktop\dp4\ex4.html"> <button type="button" class="btn
btn-primary">Submit</button></a>
</form>
<a href="C:\Users\Rohit\Desktop\dp4\regs.html"><p>Don't have an account?
Sign up</p></a>
</div>
<div class="image-container">
<img src="C:/Users/Rohit/Desktop/dp4/pt.jpg" alt="Health Monitoring">
37
<img src="C:/Users/Rohit/Desktop/dp4/eq.jpg" alt="Medical Devices">
<img src="C:/Users/Rohit/Desktop/dp4/da.jpg" alt="Data Analysis">
</div>
</div>
</body>
</html>
Register.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6J
Xm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG
5KkN" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fak
FPskvXusvfa0b4Q
" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl
" crossorigin="anonymous"></script>
<script src="form-validation.js"></script>
</head>
<style>
body
{
38
background-image:url('https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSRz7dF9OPrws2dRsOzhZGDUoUN5r2Qw
UTdSg&s');
background-size:1500px 900px;
color:white;
h1{
background-
image:url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAp
DoxViSkNFBRrCjJDoxVmsDUOthswGo2tjWY1AGtjWTMQaCkWAtBQHAA0FE
kMli0DRNUDGowM//9k='); background-size:1500px 900px;
background-color: #F5A623;
color: white;
padding: 20px; text-
align: center;
}
</style
<body>
<h1 class="text-center">PATIENT SIGN-IN</h1>
<div class="container">
<h2>Register</h2>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
ariadescribedby="nameHelp" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email"
ariadescribedby="emailHelp" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="gender">Gender</label>
39
<input type="number" class="form-control" id="number"
ariadescribedby="number" placeholder="Enter your Gender">
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="text" class="form-control" id="text" aria-describedby="text"
placeholder="Enter your Age">
</div>
<div class="form-group">
<label for="email">Address</label>
<input type="text" class="form-control" id="text" aria-describedby="text"
placeholder="Enter your address">
</div>
<div class="form-group">
<a href="C:\Users\Rohit\Desktop\dp4\ex4.html"><p>Submit</p></a>
40
Screenshots:
Home page:
Login page:
41
Sign in page:
Contact page:
42
CONCLUSION
AIM
I.PROBLEM STATEMENT
1. Introduction
1.1 Purpose
The product scope for a business portfolio refers to the range of products and
services that a company offers within its portfolio. A company's product scope
may include products or services that are related to each other or may be
completely unrelated.
45
2. Overall Description
46
2.2.4 Performance evaluation
The business portfolio may have to comply with certain laws and
regulations related to e-commerce, data privacy, and online transactions. It may
have a deadline for when it needs to launch or a specific release date to meet. It
needs to be able to handle a large number of customers and transactions.
47
3. External Interface Requirements
• Dashboard: This will be the main view of your business portfolio, giving
you an at-a-glance view of all of your investments, their performances, and
any other pertinent information.
• Portfolio Summary: This page will show an overview of your entire
portfolio, including risk profile, diversification, and total returns over time.
• Reports: This page will allow you to generate custom reports on your
portfolio, such as investment performance, portfolio allocation, and more.
Memory : 4GB
4. System Features
1. Home
2. Services
3. Projects
4. Contact
48
III.UML DIAGRAMS
2. Sequence Diagram:-
49
3. State Diagram:-
4. Activity Diagram:-
50
6. Component Diagram:-
7. Deployment Diagram:-
51
SOURCE CODE Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Business Portfolio</title>
<style>
body {
background-
image:url('https://static.vecteezy.com/system/resources/thumbnails/027/193/230/small
_2x/gradient-color-background-animation-free-video.jpg');
background-size:1500px 900px; color black;
font-family: Arial, sans-serif;
margin: 0; padding: 0;
}
header {
background-image:url(https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQMWx9VYma0W7knR6z_h6CHFZIt6DYIz
PcPsg&s);
background-size: 1500px 900px;
background-repeat:no-repeat;
background-position: center;
color:
black; padding: 20px;
text-align: center;
} nav {
background-color: #4169E1;
padding: 10px; text-align:
center;
} nav a { color:
black ; text-decoration:
underline ; margin: 0
10px;
52
}
section {
background-image:url('https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTWWax6fI1O2osFXW46sJOJXLALQiJTsB
EntQ&s'); background-size: 500px 200px;
background-repeat:no-repeat;
background-position: center;
padding: 20px;
color:black;
font-size:20px;
}
p{
text-align:center;
color: black; font-
weight:bold; font-size:40px;
}
h2{
text-align:center;
}
.center {
text-align: center;
}
button{
padding:10px;
}
footer {
background-color: #333;
color: #fff; text-align:
center; padding: 10px;
position: fixed; bottom:
0; width: 100%;
}
</style>
<header>
53
</head>
<body>
<h1>TECH WORLD</h1>
</header>
<nav>
<a href="C:/Users/Rohit/Desktop/dp2/ser.html">Services</a>
<a href="C:/Users/Rohit/Desktop/dp2/prj.html">Projects</a>
<a href="C:/Users/Rohit/Desktop/dp2/cont.html">Contact</a>
</nav>
<section id="about">
<h1>TECH WORLD</h1>
<p>WEB DEVELPOMENT</p>
</section>
<h2>
Web development refers to the creating, building, and maintaining of
websites.
It includes aspects such as web design, web publishing, web
programming, and database management.
It is the creation of an application that works over the internet
</h2>
<div class="center">
<button style="background-color: green; color: white;">Get started</button>
</div>
<footer>
</footer>
</body>
</html>
Service.html:
<!DOCTYPE html>
54
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Development Services</title>
<style>
/* Add your CSS styles here */
body {
background-
image:url(https://static.vecteezy.com/system/resources/thumbnails/027/193/230/small
_2x/gradient-color-background-animation-free-video.jpg);
background-size: 1500px 900px;
background-repeat:no-repeat;
background-position: center;
font-family: Arial, sans-serif;
margin: 0; padding: 0;
}
header {
background-image:url(https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQMWx9VYma0W7knR6z_h6CHFZIt6DYIz
PcPsg&s); background-size: 1500px 900px;
background-repeat:no-repeat;
background-position: center;
color: black;
padding: 20px; text-
align: center;
}
h1 {
margin-top: 0;
}
.container {
width: 80%;
55
margin: 0 auto;
padding: 20px;
}
.service {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 20px;
}
.service h2 {
margin-top: 0;
}
</style>
</head>
<body>
<header>
<h1>Web Development Services</h1>
</header>
<div class="container">
<div class="service">
<h2>Custom Website Design</h2>
<p>We create unique and responsive website designs tailored to your business
needs. Our designs are visually appealing, user-friendly, and optimized for all
devices.</p>
</div>
<div class="service">
<h2>Web Application Development</h2>
<p>Our team specializes in developing custom web applications using the
latest technologies. From e-commerce platforms to content management systems, we
build solutions that help your business thrive online.</p>
</div>
56
<div class="service">
<h2>Website Maintenance and Support</h2>
<p>Once your website is live, we provide ongoing maintenance and support
services to ensure its smooth operation. From regular updates to troubleshooting,
we've got you covered.</p>
</div>
<div class="service">
<h2>SEO and Digital Marketing</h2>
<p>Boost your online visibility and attract more customers with our SEO
and digital marketing services. We'll help you optimize your website for search
engines and create effective marketing strategies to reach your target audience.</p>
</div>
</div>
</body>
</html>
Project.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Projects</title>
<style>
/* Add your CSS styles here */
body {
background-
image:url(https://static.vecteezy.com/system/resources/thumbnails/027/193/230/small
_2x/gradient-color-background-animation-free-video.jpg);
background-size: 1500px 900px;
background-repeat:no-repeat;
background-position: center;
57
font-family: Arial, sans-serif;
margin: 0; padding: 0;
}
header {
background-image:url(https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQMWx9VYma0W7knR6z_h6CHFZIt6DYIz
PcPsg&s);
background-size: 1500px 900px;
background-repeat:no-
repeat; background-position: center;
background-color: #333; color: #fff;
padding: 20px; text-align: center;
}
h1 {
margin-top: 0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
.project { margin-
bottom: 40px;
}
.project img {
max-width: 300px;
height: 150px; display:
inline-block; margin-
bottom: 10px;
}
58
.project h2 {
margin-top: 0;
}
.project p {
font-size 20Px;
font-weight: bold;
margin-bottom: 0;
}
</style>
</head>
<body>
<header>
<h1>Our Projects</h1>
</header>
<div class="container">
<div class="project">
<img src="C:\Users\Rohit\Desktop\dp2\prj1.jpg" alt="Project 1">
<h2>Health Monitoring</h2>
<p>Health Monitoring provides software services that collect and
analyze healthcare data to illuminate complex, large-scale health issues. .</p>
<div class="project">
<img src="C:\Users\Rohit\Desktop\dp2\el.jpg" alt="Project 2">
<h2>E-Learning</h2>
<p>eLearning, also known as electronic learning or online learing, is the
delivery of learning and training through digital resources..</p>
</div>
</div>
</body>
</html>
59
SCREENSHOTS HOME PAGE
SERVICE PAGE
60
PROJECT PAGE
CONTACT PAGE
61
CONCLUSION
62
Ex.No.4
SCHOLARSHIP MANAGEMENT SYSTEM
AIM
I.PROBLEM STATEMENT
63
II.SOFTWARE REQUIREMENT SPECIFICATION
1 Introduction
1.1 Purpose
The product scope of the Scholarship Management System includes all the
features and functionalities that are required to manage scholarships efficiently
and effectively. Application Submission, Eligibility Check, Shortlisting,
Awarding Scholarships, Disbursal of Funds, Reporting and Analytics, Security
and Access Control, User Interface, Integration.
64
2. Overall Description
The SMS will allow students to submit their scholarship applications online. The
system will validate the application and provide feedback to the student if any
information is missing or incorrect.
2.2.3 Shortlisting
The SMS will generate an automated list of scholarship recipients and the
amounts awarded based on the predefined criteria. The system will notify the
scholarship recipients of their selection and the amount awarded.
65
2.2.5 Disbursal of Funds
The SMS will have a mechanism for tracking the disbursal of funds and ensuring
that the funds are disbursed to the right candidate at the right time.
• Students: Students will be the primary users of the SMS. They will use
the system to apply for scholarships, check their application status, and
receive updates on the scholarship process. They will be tech-savvy,
comfortable with using web-based applications, and will have basic
knowledge of the scholarship application process.
• Scholarship Committees: Scholarship committees will use the SMS to
evaluate scholarship applications, shortlist candidates, and award
scholarships. They will have in-depth knowledge of the scholarship
application process and will have a strong background in education or
scholarship management.
• Institution Administration: The institution's administration will use the
SMS to oversee the scholarship management process, configure the
eligibility criteria, shortlisting criteria, and awarding criteria. They will
have administrative privileges and will be responsible for the overall
management of the scholarship process.
66
3. External Interface Requirements
Memory : 4GB
67
4. System Features
1. Home
2. Profile
3. Application Form
III.UML DIAGRAMS
2. Class Diagram:-
68
3. Sequence Diagram:-
69
5. Activity Diagram:-
6. Component Diagram:-
70
7. Deployment Diagram:-
Source Code:
Home.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scholarship Application</title>
<style>
body {
background-
image:url('https
://encryptedtbn
0.gstatic.com/i
mages?q=tbn:
ANd9GcQpEpl
ByLimyQXZd
CYRp9Zm9D
XWqsVn
84EaGg&s');
background-size:1500px 900px;
71
font-family: Arial, sans-serif;
margin: 0; padding: 0;
background-color: #f2f2f2;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header
{
background-
image:url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEA
AkGBxANDw8PDQ8NDxAPDw0PDw4PDQ8NDQ4PFREWFhYRFRUYHSggGB
DoxViSkNFBRrCjJDoxVmsDUOthswGo2tjWY1AGtjWTMQaCkWAtBQHAA0FE
kMli0DRNUDGowM//9k='); background-size:1500px 900px;
color: white;
padding: 20px;
text-align: center;
}
h1 {
text-align: center;
}
.form-container {
background-color: #fff;
padding: 20px; border-radius:
8px; box-shadow: 0 0 10px
rgba(0,0,0,0.1);
}
.form-container label {
display: block; margin-
bottom: 10px;
}
72
.form-container input[type="text"],
.form-container
input[type="email"], .form-container
select { width: 100%;
padding: 10px; margin-bottom:
20px; border: 1px solid #ccc;
border-radius: 4px; box-sizing:
border-box;
}
.form-container textarea {
width: 100%; padding:
10px; margin-bottom:
20px; border: 1px solid
#ccc; border-radius:
4px; box-sizing:
border-box;
}
.form-container input[type="submit"] {
width: 100%; background-color:
#4caf50; color: #fff;
padding: 10px; border: none;
border-radius: 4px; cursor: pointer;
font-size: 16px;
}
.form-container input[type="submit"]:hover {
background-color: #45a049;
}
.footer {
background-color: #333;
color: #fff; padding:
20px; text-align: center;
}
.footer img {
max-width: 100px;
73
height: auto; margin:
10px;
}
</style>
<header>
</head>
<body>
<h1>Apply for Scholarship</h1>
</header>
<div class="container">
<div class="form-container">
<form action="#" method="post">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="university">University</label>
<input type="text" id="university" name="university" required>
<label for="gpa">GPA</label>
<input type="text" id="gpa" name="gpa" required>
74
<label for="Category">Scholarship Category</label>
<input type="text" id="Category" name="Category" required>
</form>
</div>
</div>
</div>
</body>
</html>
75
Screenshots:
Home page:
Login.html:
76
Sign in.html:
Review.html:
77
CONCLUSION
78
Ex.No.5
E-LEARNING
AIM
I.PROBLEM STATEMENT
1.1 Purpose
79
1.3 Definitions, Acronyms, and Abbreviations
2. Overall Description
80
2.2.3 Progress tracking and reporting
The website should track learners' progress through courses and provide
reports to instructors or administrators on learner performance.
81
3. External Interface Requirements
Memory : 4GB
4. System Features
1. Categories
82
2. Courses
3. MyLearning
4. Community
5. Certificate generation
III.UML DIAGRAMS
2. Class Diagram:-
83
3. Sequence Diagram:-
84
5. Activity Diagram:-
6. Component Diagram:-
85
7.Deployment Diagram:-
<html lang="en">
<head>
<meta charset="utf-8">
<title>Neopat</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitterbootstrap/4.6.0/css/bootstrap.min.css">
86
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600&family=Nunito:
wght@600;700;800&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
87
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link"
href="C:\Users\Rohit\Desktop\dp3\x.html">MyLearning</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="C:\Users\Rohit\Desktop\dp3\ex.html">Community</a>
</li>
</ul>
<li class="nav-item">
</li>
</ul>
88
</div>
</nav>
<div class="container">
</div>
</div>
</a>
</div>
89
<img class="img-fluid" src="C:\Users\Rohit\Desktop\dp3\graphic.jpg"
alt="">
</div>
</a>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Categories end -->
<div class="container">
</div>
91
<a href="#" class="flex-shrink-0 btn btn-sm btn-primary px-3 borderend"
style="border-radius: 30px 0 0 30px;">Read More</a>
</div>
</div>
<h3 class="mb-0">1490.00</h3>
<div class="mb-3">
<small>(123)</small>
</div>
</div>
</div>
92
</div>
</div>
</div>
</div>
<h3 class="mb-0">1999.00</h3>
<div class="mb-3">
<small>(120)</small>
</div>
93
</div>
</div>
</div>
</div>
</div>
</div>
<h3 class="mb-0">9500.00</h3>
<div class="mb-3">
<small>(203)</small>
</div>
</div>
<div class="d-flex border-top">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
95
<div class="col-md-4">
<h4>About Us</h4>
</div>
<div class="col-md-4">
<h4>Quick Links</h4>
<ul class="list-unstyled">
<li><a href="C:\Users\Rohit\Desktop\dp3\index.html">Home</a></li>
<li><a href="C:\Users\Rohit\Desktop\dp3\index.html">Courses</a></li>
<li><a href="C:\Users\Rohit\Desktop\dp3\enroll.html">MyLearning</a></li>
<li><a href="com.html">Community</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Contact Us</h4>
</div>
</div>
<hr>
</div>
</footer>
96
</body>
</html>
Mylearning.html
<div class="jumbotron">
<hr class="my-4">
</div>
<div class="row">
<div class="col-md-8">
<h2>My Courses</h2>
<ul>
<li>Data Science</li>
<li>Cyber Security</li>
</ul>
</div>
<div class="col-md-4">
<h2>My Certificates</h2>
97
<ul>
</ul>
</div>
</div>
</div>
<section class="my-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>My Progress</h2>
<p>Track your progress and see how you're doing in your courses.</p>
</div>
<div class="col-md-6">
<div class="progress">
</div>
<div class="progress">
</div>
98
<p class="mt-2 mb-0">Data Science</p>
<div class="progress">
</div>
<p class="mt-2 mb-0">Full Stack Web Development</p>
<div class="progress">
</div>
</div>
</div>
</div>
</section>
99
SCREENSHOTS
Login page:
Home page:
100
101
102
CONCLUSION
103