BONAFIDE CERTIFICATE

Certified Bonafide Record workdone by K.ABINAYA Register Number

71382106001 of the class III-year Information Technology during the
academic year 2023-2024.

Submitted for the Practical Examination held on

at Sri Ramakrishna Institute of Technology,Coimbatore.

STAFF IN CHARGE

INTERNAL EXAMINER EXTERNAL EXAMINER

1
2
 EX .NO : 01
ONLINE BOOK STORE
DATE : 01.04.2024

AIM

To develop the website for online Bookstore.

1. 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.

2. SOFTWARE REQUIREMENT SPECIFICATION

1. INTRODUCTION

This document outlines the Software Requirements Specifications (SRS) for an online
bookstore. It's the roadmap for building a successful online store, detailing the functionalities
and features it will offer. This SRS serves as a vital guide for everyone involved, from
developers who need to build it, to stakeholders who need to understand its purpose. Here,
you'll find the online bookstore's core objectives, the features it will encompass, and any
specific terminology explained for clear communication. Consider this SRS the first step in
bringing your vision of a thriving online bookstore to life.

1.1 PURPOSE

The purpose of this Software Requirements specification (SRS) is to fully document

the specifications and requirements for the Online Bookstore. The Online Bookstore is meant

3
as a way for customers to browse books on the website and buy them from home without the
need to travel to a bookshop.

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.

1.3 DEFINITIONS, ACRONYMS AND ABBREVATION

 ISBN: International Standard Book Number, a unique identifier assigned to books

by the publisher.
 CRM: Customer Relationship Management, the practice of managing interactions
and relationships with customers, typically through the use of software tools.
 OBS – Online Book Store.
 User -Customer, Publisher, and Administrator.
 Customer- a person who is purchasing a book.
 Publisher-person who prepares and issues books, journals, or music for sale.
 Administrator/Admin-User having all the privileges to operate.

2. OVERALL DESCRIPTION
2.1 PRODUCT PERSPECTIVE

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.

2.2 PRODUCT FUNCTIONS

This software includes details of books such as:

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.

4
2.2.2 ADD ITEMS TO CART

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 finalize their purchase by entering billing and shipping
information, selecting a payment method, and reviewing their order before submitting it.

2.2.4 VIEW ORDER HISTORY

Customers should be able to view their past orders and track the status of their current orders.

2.3 USER CLASSES AND CHARACTERISTICS

 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. 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.

2.4 GENERAL CONSTRAINTS

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.

5
3 EXTERNAL INTERFACE REQUIREMENTS

3.1 USER INTERFACES

 This software starts with a login form.

 There is many pop - up menus in the main form which are enabled only after the
proper login.
 Each pop - up menu contains sub menus which will enable easy interaction

3.2 HARDWARE INTERFACES

 Processor : Intel core i3

 Process speed : 1.7 GHz
 Memory : 4GB
 Hard drive : 443

3.3 SOFTWARE INTERFACES

 Operating system : Windows 7,8 or 10

 Front End : PHP
 Back End : MYSQL

4 SYSTEM FEATURES

This system contains 5 modules in it. They are given below:

 Authentication
 Stock Details
 Reviews and Ratings
 Payment Details
 Report generation

3. UML DIAGRAMS
6
1.USECASE DIAGRAM

2.CLASS DIAGRAM

3.SEQUENCE DIAGRAM

7
4.COLLABRATION DIAGRAM

8
 5. STATECHART DIAGRAM

6. ACTIVITY DIAGRAM

9
7.COMPONENT DIAGRAM

8. DEPLOYMENT DIAGRAM

9. PACKAGE DIAGRAM
10
4.CODE
11
Index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/
Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<title>Online Book Store</title>
</head>
<style>
.fg{
margin-left:8px;
}
</style>
<body style="background-color: #6ab5ef;">
<nav class="navbar navbar-expand-lg navbar-dark bg-light mx-auto">
<img style="padding-left: 20px;padding-right:20px ;" src="logo.png" alt="logo"
width="140px" height="50"/>
<!-- <a class="navbar-brand" href="#" style="margin-right: 20px">Amazon Kindle</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" style="margin-right: 20px">
<li class="nav-item active">
<a class="nav-link active" href="#" style="margin-right: 20px;
color:#000;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.bookswagon.com/science-mathematics-
books" style="margin-right: 20px; color:#000;">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.bookswagon.com/featured-authors"
style="margin-right: 20px; color:#000;">Authors</a>
</li>
<li class="nav-item">

12
 <a class="nav-link" target="_blank" href="mycart.html" style="margin-right: 20px;
color:#000;">MyCart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="margin-right: 20px; color:#000;"></a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="About.html" style="margin-right: 20px;
color:#000;">About</a>
</li>
</ul>
<form class="d-flex" action="#" autocomplete="on">
<input class="form-control mr-sm-2 fg" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-primary ml-auto fg" type="submit">Search</button>
</form>
<div>
<select class="btn btn-primary dropdown-toggle fg" data-bs-toggle="dropdown"
name="cars" id="cars">
<option value="Add Location">Add Location</option>
<option value="Coimbatore">Coimbatore</option>
<option value="Udumalpet">Udumalpet6</option>
<option value="Dharapuram">Dharapuram</option>
</select>
</div>
</div>
<a href="Reg.html" download
target="_blank" class="btn btn-primary" data-toggle="tooltip" data-bs-
placement="right"
style="margin-right: 10px">Register</a>
<a href="log.html" download
target="_blank" class="btn btn-primary" data-toggle="tooltip" data-bs-
placement="right"
style="margin-right: 10px">Login</a>
</nav>
<h1 class="text-center my-4">Top Courses Pdf Books</h1>
<br><br>
<div class="row row-col-1 row-cols-md-3 m-auto my-4">
<div class="m-auto col-md-3" id="cards">
<div class="card h-100">
<img src="https://miro.medium.com/max/1800/1*5eV1xmJs2-sJ4DdejfdnQA.png"
class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Javascript</h5>
<p class="card-text">
This Is A Book For Javascript. Beginner Friendly all Things need for beginners there
in pdf book mentioned
please Download and gain knowledge about JavaScript

13
 </p>
<a href="https://drive.google.com/file/d/1YOuhfAak-
Z3Ra_NBX9_AMhFShuQsMMpI/view?usp=sharing" download
target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
title="Download Book">Download Book</a>
</div>
</div>
</div>
<div class="m-auto col-md-3">
<div class="card h-100">
<img
src="https://i.pinimg.com/originals/1f/ec/3e/1fec3ee0665075852c4665a01259682d.png"
class="card-img-top"
alt="..." />
<div class="card-body">
<h5 class="card-title">C Programming</h5>
<p class="card-text">Advance C Programming Course From Pdf File Please
Download This File From Here and You
Have From Zero To Hero In C Programming</p>
<a href="https://drive.google.com/file/d/1_NA-
zRm6BXcI8Q45UJmQ0o1NGBQkFQF8/view?usp=sharing" download
target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
title="Download Book">Download Book</a>
</div>
</div>
</div>
<div class="col-md-3 m-auto">
<div class="card h-100">
<img src="https://www.vtc.com/files/images/courses/33797.jpeg" class="card-img-top"
alt="..." />
<div class="card-body">
<h5 class="card-title">C++ Course</h5>
<p class="card-text">
Advance C++ Course in Simple English Language Please Download A Pdf From
Here and Gain Your Knowledge in C++
</p>
<a href="https://drive.google.com/file/d/11W13yROf4_qr7N0P9HbBeB-
SKTdeQs6W/view?usp=sharing" download
target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
title="Download Book">Download Book</a>
</div>
</div>
</div>
</div>
</div>
<div class="row row-col-1 row-cols-md-3 m-auto my-4 mb-8">
<div class="m-auto col-md-3">
<div class="card h-100">

14
 <img src="https://miro.medium.com/max/840/1*RJMxLdTHqVBSijKmOO5MAg.jpeg"
class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Python Programming</h5>
<p class="card-text">
Python Programming Course From Basic To Advance Level Please Download a Pdf
File and Make You To A
Professional Python Developer Or Freelancer.
</p>
<a
href="https://drive.google.com/file/d/1BQsKJ7yCo93vCW9SoJibFOUGPYivdgQ_/view?
usp=sharing" download
target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
title="Download Book">Download Book</a>
</div>
</div>
</div>
<div class="m-auto col-md-3">
<div class="card h-100">
<img
src="https://d1jnx9ba8s6j9r.cloudfront.net/imgver.1551437392/img/co_img_193_150478221
3.png"
class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Java Programming</h5>
<p class="card-text">Java Programming Language From Basic To Advance Level.
Learn Java Programming With Object
Oriented Programming(OOP) From This Pdf Book.</p>
<a href="https://drive.google.com/file/d/1I_D-
UmWHdXkNKNODdlvfNxtzHyMkA8M8/view?usp=sharing" download
target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
title="Download Book">Download Book</a>
</div>
</div>
</div>
<div class="col-md-3 m-auto">
<div class="card h-100">
<img src="https://www.surat-training-course.com/ampimage/fluttercourseinsurat.webp"
class="card-img-top"
alt="..." />
<div class="card-body">
<h5 class="card-title">Flutter(DART)</h5>
<p class="card-text">
Learn Flutter From Basic To Advance Level. you can build android, desktop and iOS
application using flutter.
</p>

15
 <a
href="https://drive.google.com/file/d/1wY9Ky8cHO1D5WCnCr0ppFSyL2RiHYP0K/view?
usp=sharing" download
target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
title="Download Book">Download Book</a>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1g
YU5S9FOnJ0"
crossorigin="anonymous"></script>
</body>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</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>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d31813.47720085738!2d7.932320312337292!3d4.650218183806062!2m3!1f0!2f0!3f0!
3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x96b35ee015625d%3A0xade4c88f13e7aa2e!
2sAmazon%20Kindle%20Publisher!5e0!3m2!1sen!2sin!4v1675750282742!5m2!1sen!2sin"
width="500" height="350" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="col-md-3 text-light">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="=index.html">Home</a></li>
<li><a href="about.html" target="_blank">About us</a></li>
<li><a href="contact.html" target="_blank">Contact</a></li>
</ul>
</div>
<div class="col-md-3 text-light">
<h5>Contact</h5>
<ul class="list-unstyled">

16
 <li><a href="mailto:[email protected]">Gmail</a></li>
<li><a href="tel:+918344563965">Phone</a></li>
<li><a href="https://goo.gl/maps/n3fykfCvwsZLjH6z9"
target="_blank">Address</a>
<p>Quazipur Rd, Teliyana, Chedibeer, Bhadohi Nagar Palika, Uttar Pradesh
221401</p>
</li>
</ul>
</div>
</div>
</div>
</footer>

About.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>About Us</title>
</head>
<body>
<div class="container my-5">
<h1 class="text-center">About Us</h1>
<p>We are an online bookstore dedicated to providing our customers with a wide range of
books to choose from, at affordable prices. Our mission is to make it easy and convenient for
everyone to access their favourite books and discover new ones. Our team is passionate about
books and we are committed to delivering excellent customer service. Thank you for
choosing us as your online bookstore.</p>
</div>
</body>
</html>

Log.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"

integrity="sha3849aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+N
cPb1dKGj7Sk" crossorigin="anonymous">

17
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-
OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<title>Login</title>
</head>
<body>
<h1>Amazon Kindle</h1>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<form>
<h1 class="text-center">Login</h1>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" aria-
describedby="emailHelp">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>

Mycart.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></
script>
</head>

18
 <body>
<div class="container">
<h1>My Cart</h1>
<table class="table">
<thead>
<tr>
<th>Book Title</th>
<th>Author</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td>Harry Potter</td>
<td>Prathap</td>
<td>190.00</td>
<td>
<input type="number" value="1" min="1">
</td>
<td>190.00</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>To Kill a Mocking Bird</td>
<td>James Bond</td>
<td>250.00</td>
<td>
<input type="number" value="1" min="1">
</td>
<td>250.00</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
</tbody>
</table>
<h3>Total: 440</h3>
<a href="payment.html" class="btn btn-success">Checkout</a>
</div>
</body>
</html>

Payment.html

19
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/
font-awesome.min.css">
<style>
body {
font-family: Arial;
font-size: 17px;
padding: 8px;
}
*{
box-sizing: border-box;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
.col-75 {
-ms-flex: 75%; /* IE10 */
flex: 75%;
}
.col-25,
.col-50,
.col-75 {
padding: 0 16px;
}
.container {
background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
}
input[type=text] {
width: 100%;

20
 margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
margin-bottom: 10px;
display: block;
}
.icon-container {
margin-bottom: 20px;
padding: 7px 0;
font-size: 24px;
}
.btn {
background-color: #04AA6D;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius: 3px;
cursor: pointer;
font-size: 17px;
}
.btn:hover {
background-color: #45a049;
}
a{
color: #2196F3;
}
hr {
border: 1px solid lightgrey;
}
span.price {
float: right;
color: grey;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack
on top of each other instead of next to each other (also change the direction - make the "cart"
column go on top) */
@media (max-width: 800px) {
.row {
flex-direction: column-reverse;
}
.col-25 {
margin-bottom: 20px;
}

21
}
</style>
</head>
<body>
<div class="row">
<div class="col-75">
<div class="container">
<form action="#">
<div class="row">
<div class="col-50">
<h3>Billing Address</h3>
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
<input type="text" id="fname" name="firstname" placeholder="John M. Doe">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email" placeholder="[email protected]">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="adr" name="address" placeholder="542 W. 15th Street">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city" placeholder="New York">
<div class="row">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state" placeholder="NY">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip" placeholder="10001">
</div>
</div>
</div>
<div class="col-50">
<h3>Payment</h3>
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname" placeholder="John More Doe">
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-
4444">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth" placeholder="September">
<div class="row">
<div class="col-50">

22
 <label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear" placeholder="2018">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="352">
</div>
</div>
</div>
</div>
<label>
<input type="checkbox" checked="checked" name="sameadr"> Shipping address same
as billing
</label>
<input type="submit" value="Continue to checkout" class="btn">
</form>
</div>
</div>
<div class="col-25">
<div class="container">
<h4>Cart <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i>
<b>2</b></span></h4>
<p><a href="#">Harry Potter</a> <span class="price">190.00</span></p>
<p><a href="#">To Kill a Mocking Bird</a> <span class="price">250.00</span></p>
<hr>
<p>Total <span class="price" style="color:black"><b>440.00</b></span></p>
</div>
</div>
</div>
</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/dAiS6JXm"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskv
Xusvfa0b4Q" crossorigin="anonymous"></script>

23
 <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>
<body>
<h1>Amazon Kindle</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" aria-describedby="nameHelp"
placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp"
placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>

5.OUTPUT

24
25
26
CONCLUSION

Online bookstore has many advantages compared to its counterparts such as physical
book store, the online bookstore allows it's user to shop at one place where in physical store
the books are scattered at the different places which consumes a lot of time and online
bookstore helps in saving that time and it also avoids the problem of unavailability of books
at physical store as numerous vendors from different places sell their books at one place. This
project is efficient in maintaining users records and can perform operations on it, also reduces
the work load on the shop owner of knowing the quantity of books available and which books
are available and keeps the records of how many books are purchased and sold. Thus the
implementation of Online Book Store has been verified and executed successfully

27
 EX .NO : 02
HEALTH MONITORING SYSTEM
DATE : 01.04.2024

AIM

To develop the website for Health Monitoring System.

1. PROBLEM STATEMENT

A health monitoring system is needed to track and monitor an individual's health

parameters and provide real-time feedback to improve their overall wellbeing. The system
should be able to collect data from various sensors and devices such as wearable devices,
medical equipment, and other sources, and use this data to provide insights on the individual's
health status. The system should also provide alerts and notifications for any critical health
issues that may require immediate attention.

2. SOFTWARE REQUIREMENT SPECIFICATION

1. INTRODUCTION

This Software Requirements Specification (SRS) lays the groundwork for a health
monitoring system, a digital companion empowering you to manage your health. This
document serves as a roadmap for developers, outlining the system's functionalities, features,
and technical specifications. It will guide analysts, project managers, and stakeholders in
ensuring the system meets your health needs effectively. Dive into this SRS to discover the
functionalities that will keep you informed and in control of your health journey.

1.1 PURPOSE

The primary goal of a health monitoring system is to help individuals improve their
health and wellbeing by providing them with the tools to track their progress, identify
potential health issues early on, and make informed decisions about their health.

28
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.

1.3 DEFINITIONS, ACRONYMS AND ABBREVATIONS

 Health Monitoring System: A system that tracks and monitors an individual's

health parameters and provides real-time feedback to improve their overall
wellbeing.
 Sensors: Electronic devices that detect changes in physical parameters, such as
temperature, humidity, and pressure, and convert them into electrical signals.
 EHR: Electronic Health Record, a digital version of a patient's medical record
that includes information about their medical history, diagnoses, medications, and
other healthcare-related information.
 IoT: Internet of Things, a system of interconnected devices that can exchange
data over the internet.
 BPM: Beats Per Minute, a unit of measurement for heart rate.
 SpO2: Peripheral Capillary Oxygen Saturation, a measure of the amount of
oxygen in the blood.
 BMI: Body Mass Index, a measure of body fat based on height and weight.

2. OVERALL DESCRIPTION
2.1 PRODUCT PERSPECTIVE

The product perspective of a health monitoring system describes how the system fits
into the larger context of healthcare and technology.

2.2 PRODUCT FUNCTIONS

This software includes details of health data such as:

29
2.2.1 HEALTH DATA COLLECTION

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.

2.2.2 DATA ANALYSIS

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.

2.2.3 ALERTING AND NOTIFICATION

The system should provide alerts and notifications to individuals and healthcare
providers if abnormalities or emergencies are detected. For example, the system may notify
healthcare providers if an individual's blood pressure reaches a dangerous level.

2.2.4 REAL-TIME FEEDBACK

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.

2.3 USER CLASSES AND CHARACTERISTICS

 Individuals: The primary user class of a health monitoring system is individuals who
want to track and monitor their health status. These individuals may have various
characteristics, such as age, gender, health conditions, and fitness levels.
 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.

30
2.4 GENERAL CONSTRAINT

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.

3. EXTERNAL INTERFACE REQUIREMENTS

3.1 USER INTERFACES

 Dashboards: Some health monitoring systems provide a dashboard as the primary

user interface. Dashboards are graphical user interfaces that provide an overview of
the system's data and metrics, such as vital signs or activity levels. Dashboards can
include various UI elements, such as graphs, tables, and widgets.
 Wearables: Some health monitoring systems provide wearables as the primary user
interface. Wearables are small electronic devices that can be 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.

3.2 HARDWARE INTERFACES

 Processor : Intel core i3

 Process speed : 1.7 GHz
 Memory : 4GB
 Hard drive : 443

3.3 SOFTWARE INTERFACES

 Operating system : Windows 7,8,10 or 11

 Front End : HTML, BOOTSTRAP, JS
 Back End : MYSQL

31
4. SYSTEM FEATURES

This system contains 4 modules in it. They are given below:

 Home
 About
 Contact
 Dashboard

3. UML DIAGRAMS
1. USECASE DIAGRAM

32
2.CLASS DIAGRAM

3.SEQUENCE DIAGRAM

33
4.COLLABORATION DIAGRAM

5.STATECHART DIAGRAM

34
6.ACTIVITY DIAGRAM

7.COMPONENT DIAGRAM

35
8.DEPLOYMENT DIAGRAM

9.PACKAGE DIAGRAM

36
4.CODE
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HEALTH24x7</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicons -->
<link href="img/favicon.ico" rel="icon">
<link href="img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300|
Nunito:400,700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="vendor/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="vendor/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="vendor/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Main Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<style>
/* Custom Styles */

37
/* Header */
.header {
align-items: center;
background-color: #007bff; /* Change background color */
color: #fff;
padding: 20px 0;
}
.header h1 a {
color: #fff;
text-decoration: none;
}
.nav-menu {
list-style: none;
padding: 0;
text-align: center; /* Center nav items */
}
.nav-menu li {
display: inline;
margin-left: 20px;
}
.nav-menu li a {
color: #fff;
text-decoration: none;
}
/* Footer */
.footer {
background-color: #f8f9fa; /* Change background color */
color: #333; /* Change text color */
padding: 30px 0;
}
.footer-info h3 {
color: #007bff; /* Change text color */
}
.footer-info p {
color: #666;
}
.footer-links li {
list-style: none;
margin-bottom: 10px;
}
.footer-links a {
color: #666; /* Change link color */
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}
.footer-contact p {

38
 margin-bottom: 10px;
}
.footer-newsletter form {
display: flex;
align-items: center;
}
.footer-newsletter input[type="email"] {
flex: 1;
margin-right: 10px;
padding: 10px;
border: 1px solid #ccc;
}
.footer-newsletter input[type="submit"] {
background-color: #007bff; /* Change button color */
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background-color: #007bff;
color: #fff;
padding: 10px 15px;
border-radius: 50%;
cursor: pointer;
z-index: 999;
}
.back-to-top i {
font-size: 20px;
}
</style>
</head>
<body>
<header class="header">
<div class="container-fluid">
<div class="logo pull-left">
<h1><a href="index.html">HEALTH 24x7</a></h1>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="contact.html">Contact</a></li>

39
 </ul>
</nav>
</div>
</header>
<section class="banner">
<div class="container">
<div class="col-lg-12">
<div class="banner-nav">

</div>
</div>
</div>
</section>
<section class="about">
<div class="container">
<header class="section-header">
<h3>About Us</h3>
<p>
We support care across clinical conditions and acuity levels through configurable
monitoring and patient engagement experiences.
</p>
</header>
<div class="row about-cols">
<div class="col-md-4">
<div class="about-col">
<h2 class="title"><a href="#">Fitness Tracking</a></h2>
<p>
Fitness tracking allows you to monitor your progress towards fitness goals
and gain insights into your overall health and wellbeing. You can track various aspects of
your physical activity, such as steps taken, distance covered, calories burned, and heart rate.
Additionally, some fitness trackers can monitor your sleep patterns, stress levels, and other
biometric data.
</p>
<div class="read-more">
<a href="fitness.html">VIEW</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="about-col">
<h2 class="title"><a href="#">Heart Rate Monitoring</a></h2>
<p>
Heart rate monitoring is the process of measuring the number of times your
heart beats per minute (bpm) in order to gauge your cardiovascular health and exercise
intensity. It is typically done using a heart rate monitor, which can be a wearable device such
as a smartwatch or a chest strap, or through sensors built into gym equipment.
</p>
<div class="read-more">

40
 <a href="#">VIEW</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="about-col">
<h2 class="title">Weight Tracking<a href="#"></a></h2>
<p>
Weight tracking is the practice of regularly recording your body weight in
order to monitor your progress towards weight-related health goals. This can be done using a
variety of methods, including traditional scales, smart scales that connect to an app, or body
composition monitors. Tracking your weight can help you identify patterns and trends in your
weight loss or gain over time.
</p>
<div class="read-more">
<a href="#">VIEW</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer Start -->
<footer class="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>HEALTH 24x7</h3>
<div class="footer-info">
<p>
We support care across clinical conditions and acuity levels through
configurable monitoring and patient engagement experiences.
</p>
</div>
<div class="footer-contact">
<p>
<strong>Contact Us:</strong><br>
SRK ROAD<br>
CBE<br>
INDIA <br>
<strong>Phone:</strong> 987654382<br>
<strong>Email:</strong> [email protected]
</p>
</div>
<div class="footer-newsletter">
<h4>Subscription</h4>
<form action="" method="post">

41
 <input type="email" name="email" placeholder="Your Email"><input
type="submit" value="Subscribe">
</form>
</div>
</div>
</div>
</div>
</div>
</footer>
<a href="#" class="back-to-top"><i class="ion-md-arrow-dropup"></i></a>
<!-- Vendor JS Files -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/jquery/jquery-migrate.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/easing/easing.min.js"></script>
<script src="vendor/superfish/hoverIntent.js"></script>
<script src="vendor/superfish/superfish.min.js"></script>
<script src="vendor/waypoints/waypoints.min.js"></script>
<script src="vendor/touchSwipe/jquery.touchSwipe.min.js"></script>
<script src="vendor/counterup/counterup.min.js"></script>
<script src="vendor/owlcarousel/owl.carousel.min.js"></script>
<script src="vendor/isotope/isotope.pkgd.min.js"></script>
<script src="vendor/lightbox/js/lightbox.min.js"></script>
<!-- Main Javascript File -->
<script src="js/main.js"></script>
</body>
</html>

Fitness.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fitness</title>
<link rel="stylesheet" href="fitnessstyle.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Date</th>
<th>Exercise Type</th>
<th>Duration (mins)</th>
<th>Distance (km)</th>
<th>Actions</th>

42
 </tr>
</thead>
<tbody>
<tr>
<td>01/01/2023</td>
<td>Running</td>
<td>30</td>
<td>5</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>02/01/2023</td>
<td>Cycling</td>
<td>45</td>
<td>10</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>03/01/2023</td>
<td>Jogging</td>
<td>35</td>
<td>7</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
<!-- <div class="frameanime">
<div class="frame">
<div class="center">
<div class="headline">
<div class="small">your daily</div>progress
</div>
<div class="circle-big">
<div class="text">
2569<div class="small">kcal</div>
</div>
<svg>
<circle class="bg" cx="57" cy="57" r="52"/>

43
 <circle class="progress" cx="57" cy="57" r="52"/>
</svg>
</div>
<div class="circles-small">
<div class="circle-small">
<div class="text">
16445<div class="small">steps</div>
</div>
<svg>
<circle class="bg" cx="40" cy="40" r="37"/>
<circle class="progress one" cx="40" cy="40" r="37"/>
</svg>
</div>
<div class="circle-small">
<div class="text">
22<div class="small">km</div>
</div>
<svg>
<circle class="bg" cx="40" cy="40" r="100"/>
<circle class="progress two" cx="40" cy="40" r="37"/>
</svg>
</div>
</div>
</div>
</div>
</div> -->
</body>
</html>

Fitnessstyle.css

/* Custom Styles for Fitness.html */

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

th, td {
padding: 10px;
text-align: left;

44
 border-bottom: 1px solid #ddd;
}

thead th {
background-color: #007bff;
color: #fff;
}

tbody tr:hover {
background-color: #f2f2f2;
}

button {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin-right: 5px;
}

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

.frameanime {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.frame {
width: 300px;
height: 300px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.circle-container {
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
top: 50%;

45
 left: 50%;
transform: translate(-50%, -50%);
}

.circle-small {
width: 80px;
height: 80px;
text-align: center;
}

.circle-small .text {
font-size: 16px;
margin-top: 10px;
}

.circle-small svg {
width: 80px;
height: 80px;
}

.bg {
fill: none;
stroke: #eee;
stroke-width: 7;
stroke-dasharray: 320;
transition: stroke-dashoffset 0.3s;
}

.progress {
fill: none;
stroke-width: 7;
stroke-dasharray: 320;
stroke-linecap: round;
transition: stroke-dashoffset 0.3s;
}

.one {
stroke: #007bff;
}

.two {
stroke: #28a745;
}

5.OUTPUT

46
47
48
CONCLUSION

In conclusion, a health monitoring system is a software-based solution that enables

individuals to track, monitor, and analyse their health-related data. These systems provide
users with valuable insights into their health status, allowing them to make informed
decisions about their lifestyle and wellness. The development of a health monitoring system
requires careful consideration of various factors, such as user needs and expectations,
regulatory compliance, and technical feasibility. The system's design and development should
prioritize usability, reliability, accuracy, affordability, and ethical and legal compliance to
ensure that users receive trustworthy health information and recommendations. User
interfaces play a critical role in the success of a health monitoring system. The UI should be
user-friendly, visually appealing, and intuitive, providing users with a positive experience and
encouraging user adoption and engagement. Thus the implementation of Health Monitoring
System has been verified and executed successfully.

EX .NO : 03
BUSINESS PORTFOLIO
DATE : 01.04.2024

AIM

To develop the website for Business Portfolio.

1. PROBLEM STATEMENT

Business portfolio refers to the specific challenges or issues that a company is facing
in managing its portfolio of businesses, products, and services. Some common problems that
companies may face when managing their business portfolio include:

 Lack of product-market fit: The company's products or services may not align
with the needs and preferences of the target market, leading to low sales and
revenue.

 Changing consumer trends: Consumer preferences and trends can change rapidly,
making it necessary for companies to adapt their portfolios to stay relevant and
competitive

49
  Competitive threats: New competitors may enter the market or existing ones may
improve their products or services, making it difficult for the company to maintain
its market position.

2. SOFTWARE REQUIREMENT SPECIFICATION

1. INTRODUCTION

This Software Requirements Specification (SRS) serves as a roadmap for developing

the BPS, ensuring it aligns with the needs of its users. The document details the
functionalities, features, and technical aspects of the software.

This document outlines the technical specifications for a Business Portfolio Software
(BPS) application. A BPS is a software tool designed to streamline the management of
investment portfolios for businesses. It offers functionalities to organize, track, and analyze
various investments across different asset classes.

1.2 PURPOSE

A business portfolio is a collection of businesses, products, and services that a

company offers to the market. The purpose of a business portfolio is to help a company
manage its various businesses and products effectively, by assessing their performance and
identifying opportunities for growth and development.

1.2.1 PRODUCT SCOPE

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.

1.3 DEFINITIONS, ACRONYMS AND ABBREVIATIONS

 Business Portfolio: A collection of businesses, products, and services that a company

offers to the market.
 HTML - Hypertext Markup Language
 CSS - Cascading Style Sheets

50
  JavaScript - A programming language used to create interactive effects within web
browsers
 UI - User Interface
 UX - User Experience
 CMS - Content Management System
 MVC - Model-View-Controller
 API - Application Programming Interface
 SDK - Software Development Kit
 IDE - Integrated Development Environment
 SPA - Single Page Application
 PWA - Progressive Web App
 Hybrid App - A mobile application that combines elements of native and web
applications.
 Native App - A mobile application designed specifically for a particular platform or
device.
 Cross-Platform App - A mobile application that can be used on multiple platforms
or devices

2. OVERALL DESCRIPTION

2.1 PRODUCT PERSPECTIVE

The product perspective of a business portfolio refers to the way a company views
and manages its products within the portfolio. This includes the strategic decisions made
about which products to include in the portfolio, how to position them in the market, and how
to manage them over time.

A.PRODUCT FUNCTIONS

This software includes details of business such as:

 INVESTMENT DECISION-MAKING

A business portfolio can be used to help investors make informed decisions about
which companies to invest in, based on their portfolios of businesses, products, and
services. By analysing a company's portfolio, investors can gain insight into its
strengths, weaknesses, and overall performance.

51
  STRATEGIC PLANNING

A business portfolio can be used as a tool for strategic planning, helping a company to
make informed decisions about which businesses and product lines to prioritize, how
to allocate resources, and how to achieve its long-term goals.

 RISK MANAGEMENT

A business portfolio can be used to manage risk by diversifying a company's

investments across multiple businesses and product lines. This helps to reduce the
impact of external factors that can affect individual businesses, such as market
fluctuations or changes in consumer behaviour.

 PERFORMANCE EVALUATION

A business portfolio can be used to evaluate the performance of a company's various

businesses and product lines, helping to identify areas of strength and weakness. This
can help a company to make informed decisions about which businesses and product
lines to invest in, and which ones to divest or discontinue.

B.USER CLASSES AND CHARACTERISTICS

 Business Owners: Business owners typically have a strong understanding of their

particular industry and are looking for a portfolio that can effectively support their
business needs. They need a portfolio that can help them identify areas of opportunity
and potential risks, as well as manage their finances and investments. Characteristics:
Knowledgeable, organized, ambitious, analytical.
 Professionals: Professionals are looking for a portfolio that can help them manage
their finances in the most efficient manner possible. They are looking for a portfolio
that can help them maximize their returns, with minimal effort and risk.
Characteristics: Practical, organized, analytical, data-driven.
 Investors: Investors are looking for a portfolio that will provide them with profitable
returns and/or a reliable source of income. They need a portfolio that is well
diversified and can be easily managed over time. Characteristics: Risk-averse, patient,
disciplined, data-driven.

52
2.4 GENERAL CONSTRAINTS

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.

3.EXTERNAL INTERFACE REQUIREMENTS

3.1 USER INTERFACES

 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.

3.2 HARDWARE INTERFACES

 Processor : Intel core i3

 Process speed : 1.7 GHz
 Memory : 4GB
 Hard drive : 443

3.3 SOFTWARE INTERFACES

 Operating system : Windows 7,8,10 or 11

 Front End : HTML, CSS, JS

4. SYSTEM FEATURES

This system contains 5 modules in it. They are given below:

 Home
 Services

53
  Projects
 Contact
 Order

3.UML DIAGRAMS

1. USECASE DIAGRAM

54
2. CLASS DIAGRAM

3.SEQUENCE DIAGRAM

55
4.COLLABORATION DIAGRAM

5.STATECHART DIAGRAM

56
6.ACTIVITY DIAGRAM

7.COMPONENT DIAGRAM

57
8. DEPLOYMENT DIAGRAM

9. PACKAGE DIAGRAM

58
4.CODE

59
Index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>TECH WORLD</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<link href="img/favicon.ico" rel="icon">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300|
Nunito:400,700&display=swap" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="vendor/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="vendor/lightbox/css/lightbox.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>

<body>
<header class="header">
<div class="container-fluid">
<div class="logo pull-left">
<h1><a href="index.html">TECH WORLD</a></h1>
</div>

<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="index.html">Home</a></li>
<li><a href="service.html">Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>

<section class="slider">
<div class="slider-container">
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> <ol
class="carousel-indicators"></ol>
<div class="carousel-inner" role="listbox">

<div class="carousel-item active">

<div class="carousel-background"><img src="Tech.jpeg" alt=""></div>
<div class="carousel-container">

60
 <div class="carousel-content">
<h2>Web Development</h2>
<p>
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
</p>
<a href="service.html" class="btn-get-started">Get Started</a>
</div>
</div>
</div>

<div class="carousel-item">
<div class="carousel-background"><img src="img/image2.jpg"
alt=""></div>
<div class="carousel-container">
<div class="carousel-content">
<h2>App Development</h2>
<p>
Mobile app development is the act or process by which a mobile app
is developed for mobile devices, such as personal digital assistants, enterprise digital
assistants or mobile phones. These software applications are designed to run on mobile
devices, such as a smartphone or tablet computer. These applications can be pre-installed on
phones during manufacturing platforms, or delivered as web applications using server-side or
client-side processing </p>
<a href="service.html" class="btn-get-started">Get Started</a>
</div>
</div>
</div>
</div>

<a class="carousel-control-prev" href="#carousel" role="button" data-

slide="prev">
<span class="carousel-control-prev-icon ion-md-arrow-back" aria-
hidden="true"></span>
<span class="sr-only">Previous</span>
</a>

<a class="carousel-control-next" href="#carousel" role="button" data-

slide="next">
<span class="carousel-control-next-icon ion-md-arrow-forward" aria-
hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>
</div>
</section>

61
 <section class="about">
<div class="container">
<header class="section-header">
<h3>About Us</h3>
<p>
Tech World is a custom web & app development agency based out in India.
We have a team of skilled professionals with 290+ collective years of experience in custom
UX/UI design and web app development Solutions.

We can convert your ideas into reality. We create cost-effective, award-winning solutions for
our clients to grab digital space & create new business opportunities. </p>
</header>

<div class="row about-cols">

<div class="col-md-4">
<div class="about-col">
<h2 class="title"><a href="#">Our Mission</a></h2>
<p>
We are working to transform businesses digitally to leverage the power
of digital space. Our focus is to provide quality solutions to every business that has chosen us.
We believe in providing IT and software development solutions at an affordable price with
one hundred percent transparency, commitment and mutual trust. </p>
<div class="read-more">
<a href="#">Read More</a>
</div>
</div>
</div>

<div class="col-md-4">
<div class="about-col">
<h2 class="title"><a href="#">Our Vision</a></h2>
<p>
Our vision is to explore every dimension of the digital world, gain
knowledge and use it to help businesses to achieve long-term success creatively and quickly.
Our research and development team is constantly working on how we can evolve such web
design and development solutions to grow together with time and growth
</p>
<div class="read-more">
<a href="#">Read More</a>
</div>
</div>
</div>

<div class="col-md-4">
<div class="about-col">
<h2 class="title"><a href="#">Our Objective</a></h2>
<p>

62
 Tech world is based in India and provides web design and development
services worldwide. We thrive digital representation of businesses through our intuitive, user-
friendly, and modern website design and development services. websites that meet your
company's goals and make you 100% satisfied with our work. </p>
<div class="read-more">
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>

<footer class="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 footer-info">
<h3>TECH WORLD</h3>
<p>
Tech world is based in India and provides web design and development
services worldwide. We thrive digital representation of businesses through our intuitive, user-
friendly, and modern website design and development services. websites that meet your
company's goals and make you 100% satisfied with our work. </p>
</p>
</div>

<div class="col-lg-3 col-md-6 footer-links">

<h4>About Us</h4>
<ul>
<li><i class="ion-md-arrow-dropright"></i> <a href="#">Home</a></li>
<li><i class="ion-md-arrow-dropright"></i> <a href="#">About us</a></li>
<li><i class="ion-md-arrow-dropright"></i> <a href="#">Our
services</a></li>
<li><i class="ion-md-arrow-dropright"></i> <a href="#">Terms &
condition</a></li>
<li><i class="ion-md-arrow-dropright"></i> <a href="#">Privacy
policy</a></li>
</ul>
</div>

<div class="col-lg-3 col-md-6 footer-contact">

<h4>Contact Us</h4>
<p>
SIDDHAPUDUR<br>
COIMBATORE<br>
INDIA <br>

63
 <strong>Phone:</strong> +123-999-4011<br>
<strong>Email:</strong> [email protected]<br>
</p>

<div class="social-links">
<a href=""><i class="ion-logo-twitter"></i></a>
<a href=""><i class="ion-logo-facebook"></i></a>
<a href=""><i class="ion-logo-linkedin"></i></a>
<a href=""><i class="ion-logo-instagram"></i></a>
<a href=""><i class="ion-logo-youtube"></i></a>
</div>

</div>

<div class="col-lg-3 col-md-6 footer-newsletter">

<h4>Subscription</h4>

<form action="" method="post">

<input type="email" name="email"><input type="submit"
value="Subscribe">
</form>
</div>

</div>
</div>
</div>

<div class="container">
<div class="copyright">
&copy; Copyright TECH World. All Rights Reserved<br>

</div>
</div>
</footer>

<a href="#" class="back-to-top"><i class="ion-md-arrow-dropup"></i></a>

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/jquery/jquery-migrate.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/easing/easing.min.js"></script>
<script src="vendor/superfish/hoverIntent.js"></script>
<script src="vendor/superfish/superfish.min.js"></script>
<script src="vendor/waypoints/waypoints.min.js"></script>
<script src="vendor/touchSwipe/jquery.touchSwipe.min.js"></script>
<script src="vendor/counterup/counterup.min.js"></script>
<script src="vendor/owlcarousel/owl.carousel.min.js"></script>
<script src="vendor/isotope/isotope.pkgd.min.js"></script>
<script src="vendor/lightbox/js/lightbox.min.js"></script>

64
 <script src="js/main.js"></script>
</body>
</html>

Service.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TECH WORLD</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">

<link href="img/favicon.ico" rel="icon">

<link href="img/apple-touch-icon.png" rel="apple-touch-icon">

<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300|
Nunito:400,700&display=swap" rel="stylesheet">

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="vendor/ionicons/css/ionicons.min.css" rel="stylesheet">

<link href="vendor/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="vendor/lightbox/css/lightbox.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head> <body>
<header class="header">
<div class="container-fluid">
<div class="logo pull-left">
<h1><a href="index.html">TECH WORLD</a></h1>
<!-- <a href="#"><img src="img/logo.png" alt="" title="" /></a>-->
</div>
</div>
</header>
<section class="banner">
<div class="container">
<div class="col-lg-12">
<div class="banner-nav">
<div class="banner-box">
<a href="index.html">Home </a>
<a href="service.html">Service</a>
</div>
</div>

65
 </div>
</div>
</section>
<section id="services" class="services">
<div class="container">
<header class="section-header">
<h3>Services</h3>
</header>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="single-service">
<i class="ion-ios-desktop"></i>
<h4><a href="">Web Design</a></h4>
<p>Web design refers to the design of websites that are displayed on the
internet. It usually refers to the user experience aspects of website development rather than
software development. Web design used to be focused on designing websites for desktop
browsers</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="single-service">
<i class="ion-ios-laptop"></i>
<h4><a href="">Web Development</a></h4>
<p> 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
</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="single-service">
<i class="ion-ios-tablet-portrait"></i>
<h4><a href="">App Design</a></h4>
<p>App design is an ongoing process comprising user experience (UX) and
user interface (UI) elements. Designers ideate, define solutions, create the app's flow and
structure, and make stylistic choices from colors to fonts. Designers base choices on user
research and feedback.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="single-service">
<i class="ion-ios-phone-portrait"></i>
<h4><a href="">App Development</a></h4>
<p> Mobile app development is the act or process by which a mobile app is
developed for mobile devices, such as personal digital assistants, enterprise digital assistants
or mobile phones. These software applications are designed to run on mobile devices, such as
a smartphone or tablet computer.</p>
.</p>

66
 </div>
</div>
</div>
</div>
</section>
<section class="clients">
<div class="container">
<header class="section-header">
<h3 class="section-title">Our Clients</h3>
</header>
<div class="owl-carousel clients-carousel">
<img src="img/client-1.jpg" alt="Client Logo">
<img src="img/client-2.jpg" alt="Client Logo">
<img src="img/client-3.jpg" alt="Client Logo">
<img src="img/client-4.jpg" alt="Client Logo">
<img src="img/client-5.jpg" alt="Client Logo">
<img src="img/client-6.jpg" alt="Client Logo">
<img src="img/client-7.jpg" alt="Client Logo">
<img src="img/client-8.jpg" alt="Client Logo">
</div></div>
</section>
<footer class="footer">
<div class="container">
<div class="copyright">
&copy; Copyright TECHWORLD</a>. All Rights Reserved<br>
</div>
</div>
</footer>
<a href="#" class="back-to-top"><i class="ion-md-arrow-dropup"></i></a> <script
src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/jquery/jquery-migrate.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/easing/easing.min.js"></script>
<script src="vendor/superfish/hoverIntent.js"></script>
<script src="vendor/superfish/superfish.min.js"></script>
<script src="vendor/waypoints/waypoints.min.js"></script>
<script src="vendor/touchSwipe/jquery.touchSwipe.min.js"></script>
<script src="vendor/counterup/counterup.min.js"></script>
<script src="vendor/owlcarousel/owl.carousel.min.js"></script>
<script src="vendor/isotope/isotope.pkgd.min.js"></script>
<script src="vendor/lightbox/js/lightbox.min.js"></script>
<script src="js/main.js"></script>
</body> </html>

67
5.OUTPUT

68
69
CONCLUSION

A business portfolio is a collection of a company's products, services, and business

units, and it is crucial to the success of the company. By analysing its portfolio, a company
can identify areas where it may need to invest more resources, divest from less profitable
areas, and develop strategies to maximize profits and growth. A well-managed portfolio helps
a company maintain a competitive advantage and stay relevant in its industry. It is important
for a company to regularly review and update its portfolio to adapt to changing market
conditions and meet customer needs. Overall, a strong business portfolio is essential for a
company's long-term success. Thus the implementation of Business Portfolio has been
verified and executed successfully.

EX .NO : 04
SCHOLARSHIP MANAGEMENT SYSTEM
DATE : 01.04.2024

AIM

To develop the website for Scholarship Management System.

1. PROBLEM STATEMENT

Scholarship Management system is essential for educational institutions to manage

their scholarship programs efficiently. The current manual system of managing scholarships
is time-consuming, prone to errors, and lacks transparency. The institution has to collect and
manage data of eligible students, their academic performance, financial status, scholarship
amounts, and disbursal of funds, which involves a lot of paperwork and manual effort.

70
 This manual process of collecting and verifying data, shortlisting eligible candidates,
and disbursing funds to scholarship recipients is prone to errors, and often, deserving
candidates miss out on scholarship opportunities. Moreover, the lack of transparency in the
process creates doubts and mistrust among students and parents, leading to a negative impact
on the institution's reputation.

Therefore, there is a need for an automated Scholarship Management System that can
streamline the entire process, from application submission to fund disbursal, and ensure
transparency, efficiency, and accuracy. The system should be user-friendly, accessible to all
stakeholders, and provide real-time updates on the application status, scholarship amount, and
fund disbursal.

2.SOFTWARE REQUIREMENT SPECIFICATION

1. INTRODUCTION

1.1 PURPOSE

The purpose of the Scholarship Management System is to streamline and automate the
entire process of managing scholarships in educational institutions. The system aims to
eliminate the manual effort and paperwork involved in the current system, which is prone to
errors and lacks transparency. The system is designed to be user-friendly, accessible, and
efficient, and provide real-time updates to all stakeholders involved in the scholarship
process.

1.2 PRODUCT SCOPE

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.

1.3 DEFINITIONS,ACRONYMS AND ABBREVIATIONS

 Scholarship: Financial aid awarded to a student to support their education and

academic achievements.
 Eligibility Criteria: The set of requirements that a student must meet to be
considered eligible for a scholarship.

71
  SMS: Scholarship Management System.
 SIS: Student Information System.
 FMS: Financial Management System.
 GPA: Grade Point Average.
 Disbursal of Funds: The process of transferring scholarship funds from the
institution to the student's account.
1. OVERALL DESCRIPTION

2.1 PRODUCT PRESPECTIVE

The Scholarship Management System will provide an efficient and transparent

scholarship management process for educational institutions, students, and parents. The
system will reduce the manual effort involved in the scholarship management process,
increase efficiency, and provide real-time updates to all stakeholders involved.

2.2 PRODUCT FUNCTION

This software includes details of Scholarship data such as:

2.2.1 APPLICATION SUBMISSION

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.2 ELIGIBILITY CHECK

The SMS will automatically filter out ineligible candidates based on predefined
eligibility criteria. The system will notify the candidates who do not meet the criteria and
provide them with feedback.

2.2.3 SHORTLISTING

The SMS will automate the process of shortlisting eligible candidates based on
predefined criteria. The system will notify the shortlisted candidates of their selection status.

72
2.2.4 AWARDING SCHOLARSHIP

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.

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.

2.3 USER CLASSES AND CHARACTERISTICS

 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.

2.4 GENERAL CONSTRAINTS

The Scholarship Management System (SMS) may have some general constraints, it
must be scalable to accommodate a growing number of users and scholarship applications.
The system must be able to handle the load without compromising on performance and
responsiveness. The System must be developed and deployed within a specified timeline to
ensure that the system is available for the upcoming scholarship season.

3. EXTERNAL INTERFACE REQUIREMENTS

3.1 USER INTERFACES

73
  Dashboard: The SMS dashboard will provide a summary of the scholarship process,
including the number of applications received, the status of the applications, and the
number of scholarships awarded. The dashboard will also have quick links to
frequently used features of the system.
 Application Form: The SMS application form will be easy to fill out and will include
all necessary fields to complete the application process. The form will be responsive
and mobile-friendly, allowing applicants to apply from any device.
 Eligibility Criteria: The SMS will clearly outline the eligibility criteria for each
scholarship program, making it easy for students to understand whether they qualify
for the scholarship.

3.2 HARDWARE INTERFACES

 Processor : Intel core i3

 Process speed : 1.7 GHz
 Memory : 4GB
 Hard drive : 443

3.3 SOFTWARE INTERFACES

 Operating system : Windows 7,8,10 or 11

 Front End : HTML, BOOTSTRAP, JS

4.SYSTEM FEATURES

This system contains 4 modules in it. They are given below:

 Home
 Profile
 Application Form
 Search for Scholarship

3. UML DIAGRAMS

74
1.USECASE DIAGRAM

2.CLASSDIAGRAM

75
3.SEQUENCE DIAGRAM

4.COLLABORATION DIAGRAM

76
5.STATECHART DIAGRAM

6.ACTIVITY DIAGRAM

77
7.COMPONENT DIAGRAM

8.DEPLOYMENT DIAGRAM

78
9.PACKAGE DIAGRAM

4.CODE

79
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<title>SCH SCHEME</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<link href="img/favicon.ico" rel="icon">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300|
Nunito:400,700&display=swap" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="vendor/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="vendor/lightbox/css/lightbox.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="style.css" rel="stylesheet">
</head>

</head>
<body>
<header id="header">
<nav>
<div class="logo"><h1>SCH SCHEME</h1></div>
<ul>
<li><a class="active" href="">Home</a></li>
<li><a href="">Login</a></li>
<li><a href="">Schemes</a></li>
</ul>

</nav>
</header>

<!-- <section class="slider">

<div class="slider-container">
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators"></ol>

<div class="carousel-inner" role="listbox">

<div class="carousel-item active">

<div class="carousel-background"><img src="img/child.jpg" alt=""></div>
<div class="carousel-container">
<div class="carousel-content">

80
 <h2>EDUCATION SCHOLARSHIP</h2>
<p>An education scholarship is a type of financial aid that is awarded to
students to help cover the costs associated with pursuing a degree or other educational
program. Scholarships can be awarded based on a variety of criteria, such as academic merit,
financial need, community involvement, or specific talents or interests.</p>
</div>
</div>
</div>

<div class="carousel-item">
<div class="carousel-background"><img src="img/image2.jpg" alt=""></div>
<div class="carousel-container">
<div class="carousel-content">
<h2>App Development</h2>
<p>Mobile app development is the act or process by which a mobile app
is developed for mobile devices, such as personal digital assistants, enterprise digital
assistants or mobile phones. These software applications are designed to run on mobile
devices, such as a smartphone or tablet computer. These applications can be pre-installed on
phones during manufacturing platforms, or delivered as web applications using server-side or
client-side processing.</p>
</div>
</div>
</div>
</div>

<a class="carousel-control-prev" href="#carousel" 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="#carousel" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section> -->
<div class="diffSection" id="about_section">
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators"></ol>

<div class="carousel-inner" role="listbox">

<div class="carousel-item active">

<div class="carousel-background"><img src="img/child.jpg" alt=""></div>
<div class="carousel-container">

81
 <div style="padding-left: 30px;padding-right: 30px;" class="carousel-
content">
<h2>EDUCATION SCHOLARSHIP</h2>
<p style="font-size: medium;">An education scholarship is a type of
financial aid that is awarded to students to help cover the costs associated with pursuing a
degree or other educational program. Scholarships can be awarded based on a variety of
criteria, such as academic merit, financial need, community involvement, or specific talents
or interests.</p>
</div>
</div>
</div>

<div class="carousel-item">
<div class="carousel-background"><img src="img/image2.jpg" alt=""></div>
<div class="carousel-container">
<div style="padding-left: 30px;padding-right: 30px;" class="carousel-
content">
<h2>App Development</h2>
<p style="font-size: medium;">Mobile app development is the act or
process by which a mobile app is developed for mobile devices, such as personal digital
assistants, enterprise digital assistants or mobile phones. These software applications are
designed to run on mobile devices, such as a smartphone or tablet computer. These
applications can be pre-installed on phones during manufacturing platforms, or delivered as
web applications using server-side or client-side processing.</p>
</div>
</div>
</div>
</div>

<a class="carousel-control-prev" href="#carousel" 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="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<h2 style="padding-left: 30px;">About</h2>
<div>
<center><div class="side-text">
<h3>SCH SCHEMES</h3></center>
<p style=" margin-left: 30px;
margin-right: 30px;font-size: medium;">Scholarship management refers to the
process of administering and overseeing scholarships. It includes tasks such as designing
scholarship programs, evaluating applications, selecting recipients, distributing funds, and
monitoring scholarship recipients' progress.px

82
 The scholarship management process begins with the creation of a scholarship
program. This involves establishing eligibility criteria, determining the amount and duration
of the award, and outlining the application and selection process.Once the scholarship
program is established, the application process begins. Scholarship administrators review
applications and evaluate applicants based on established criteria such as academic
achievement, financial need, and community involvement.
</p>
</div>
</div>
</div><div class="container"><h1 class="heading">Major Scholarships</h1>
<div class="box-container">
<div class="box">
<img src="img/img1.jpg" alt="">
<h3>Pre-Matric Scholarships Scheme for Minorities</h3>
<a href="scholarship.html" class="btn">read more</a>
</div>
<div class="box">
<img src="img/img2.jpg" alt="">
<h3>National Means Cum Merit Scholarship Scheme</h3>
<a href="#" class="btn">read more</a>
</div> <div class="box">
<img src="img/img3.jpg" alt="">
<h3>Pre-matric Scholarship Disabilities Students </h3>
<a href="#" class="btn">read more</a>
</div><div class="box">
<img src="img/img4.jpg" alt="">
<h3>CBSE Merit Scholarship for Single Girl Child</h3>
<a href="#" class="btn">read more</a>
</div><div class="box">
<img src="img/talent.jpg" alt="">
<h3>National Talent Search Examination NTSE</h3>
<a href="#" class="btn">read more</a>
</div><div class="box">
<img src="img/women.jpg" alt="">
<h3>Women empowerment scholarship</h3>
<a href="#" class="btn">read more</a>
</div></div></div>
<footer>
<div class="social-menu">
<ul>
<li><a href="#" target="blank"><i class="fab fa-facebook"></i></i></a></li>
<li><a href="#" target="blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="#" target="blank"><i class="fab fa-twitter"></i></a></li>
</ul>
</div>
<div id="copyright">&#169 copyright SCH SCHEME</div>
</footer>
</body>

83
</html>

Scholarship.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scholarship Description</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/
css/bootstrap.min.css" integrity="sha512-
pfCUBgX9nwe6ClGZ6PdU6aQ2IejzU6cHnz6a4sB1RbBydZoJcZi4NXwY3CqG8PIT38pFA
01IMT1+Wvzh/9R9MQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="scholarshipstyle.css">
</head>
<body>
<div class="regform">
<h3>SCHEME 1</h3>
<form action="">
<div class="input">
<label class="textlabel" for="name">What is PMSS?</label>
<h1>The Pre-Matric Scholarships Scheme for Minorities is a government-funded
initiative that aims to provide financial assistance to students from minority communities who
are studying in class 1 to 10. The scheme is implemented by the Ministry of Minority Affairs,
Government of India.</h1>
</div>
<div class="input">
<label class="textlabel" for="email">Objective of this scheme</label>

<h1>The main objective of the scheme is to provide opportunities for the

education of minority students who are unable to pursue their studies due to financial
constraints. The scheme aims to encourage parents from minority communities to send their
children to school, reduce the dropout rate, and improve the educational attainment of
minority students.</h1>
<h1>Under the scheme, eligible students receive financial assistance in the form
of a scholarship for their school education. The scholarship covers tuition fees, maintenance
allowance, and other expenses related to education. The amount of scholarship varies based
on the class the student is studying in and the location of their school.</h1>
</div>

<div class="input">
<label class="textlabel" for="name">Eligibility Criteria</label>
<h1> <ol >
<li >The student should belong to one of the minority communities
identified by the Government of India, which include Muslims, Christians, Sikhs, Buddhists,
Jains, and Zoroastrians (Parsis).</li>

84
 <li >The student should be studying in class 1 to 10 in a government or
government-aided school.</li>
<li >The student should have secured at least 50% marks or equivalent
grade in the previous final examination.</li>
<li>The annual income of the student's family from all sources should not
exceed Rs. 1 lakh.</li>
</ol> </h1>
</div>

<div class="input">
<label class="textlabel" for="name">Important Dates</label>
<h1> <ul>
<li>Registration Starts: 01/07/2023</li>
<li>Registartion deadline: 01/09/2023</li>
<li>Selection Process: 01/12/2023</li>
</ul>
</h1>
</div><div class="btn">
<button><a href="register.html">Apply</a></button>
</div></div>
</form>
</div></body>

Scholarshipstyle.css

/* Global styles */
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
}

.regform {
background-color: #fff;
max-width: 600px;
margin: 50px auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.regform h3 {
text-align: center;
margin-bottom: 20px;
color: #007bff;
}

.input {
margin-bottom: 20px;

85
}

.input label.textlabel {
font-weight: bold;
color: #007bff;
}

.input h1 {
font-size: 16px;
line-height: 1.6;
}

.btn {
text-align: center;
}

.btn button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

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

Style.css

/* Global styles */
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
}

/* Header styles */
#header {
background-color: #007bff;
color: #fff;
padding: 20px 0;
text-align: center;
}

86
#header .logo h1 {
margin: 0;
}

#header nav ul {
list-style: none;
margin: 0;
padding: 0;
}

#header nav ul li {
display: inline;
}

#header nav ul li a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}

/* Slider styles */
.slider {
position: relative;
}

.slider .slider-container {
position: relative;
overflow: hidden;
}

.slider .carousel-item {
position: relative;
}

.slider .carousel-item .carousel-background {

width: 100%;
height: auto;
}

.slider .carousel-item .carousel-container {

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

.slider .carousel-item .carousel-content h2 {

87
 color: #fff;
font-size: 36px;
margin-bottom: 20px;
}

.slider .carousel-item .carousel-content p {

color: #fff;
font-size: 18px;
}

/* About section styles */

.diffSection {
padding: 50px 0;
background-color: #fff;
}

.diffSection p {
font-size: 36px;
margin-bottom: 30px;
}

.diffSection .side-text {
margin: 0 auto;
max-width: 800px;
}

.diffSection .side-text h2 {
font-size: 24px;
color: #007bff;
}

.diffSection .side-text p {
font-size: 18px;
line-height: 1.6;
}

/* Major Scholarships section styles */

.container {
text-align: center;
padding: 50px 0;
}

.heading {
color: #007bff;
font-size: 36px;
margin-bottom: 30px;
}

88
.box-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.box {
margin: 0 15px;
}

.box img {
width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 15px;
}

.box h3 {
font-size: 24px;
margin-bottom: 10px;
}

.btn {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}

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

/* Footer styles */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}

.social-menu {
margin-bottom: 20px;
}

89
.social-menu ul {
list-style: none;
padding: 0;
margin: 0;
}

.social-menu ul li {
display: inline;
margin: 0 10px;
}

.social-menu ul li a {
color: #fff;
font-size: 24px;
}

/* Copyright text */
#copyright {
font-size: 14px;
}

5.OUTPUT

90
91
CONCLUSION

In conclusion, the Scholarship Management System (SMS) is a web-based platform

designed to automate and streamline the scholarship application process. The system will
have various user classes, including students, parents, scholarship committees, institution
administration, financial aid officers, and system administrators, each with their unique
requirements. The SMS will have a user-friendly interface, real-time updates, and
notifications to keep all users informed about the scholarship process. Additionally, the SMS
will be developed while considering general constraints, including security, compatibility,
scalability, compliance, accessibility, integration, time constraints, and budget. The UI of the
SMS will be designed to provide a user-friendly and intuitive experience for all users. The
SMS is expected to improve the scholarship application process and help institutions provide
scholarships to deserving students more efficiently. Thus the implementation of Scholarship
Management System has been verified and executed successfully.

EX .NO : 05
E-LEARNING SYSTEM
DATE : 01.04.2024 92
AIM

To develop the website for E-Learning.

1.PROBLEM STATEMENT

There is a growing demand for flexible and accessible education that caters to the
needs of learners of all ages and backgrounds. Traditional brick-and-mortar educational
institutions often face challenges in meeting these demands due to limited resources,
infrastructure, and geographical constraints. As a result, there is a need for an e-learning
website that provides an innovative and inclusive platform for learners to access high-quality
educational resources from anywhere in the world.

2. SOFTWARE REQUIREMENT SPECIFICATION

1.1 PURPOSE

A e-learning website is a collection of courses and experienced mentors. The purpose

of an e-learning website is to provide learners with a comprehensive and inclusive learning
environment that meets their needs and enables them to achieve their educational and career
goals.

1.2 PRODUCT SCOPE

The product scope of an e-learning website includes all the features, functionalities,
and services that the website provides to learners, instructors, and administrators which
includes course catalog, course materials, etc.

1.3 DEFINITIONS,ASCRONYMS AND ABBREVIATIONS

 E-learning: The process of delivering educational content and resources to learners

through digital means, such as computers, tablets, or smartphones.
 LMS: Learning Management System
 MOOC: Massive Open Online Course
 VLE: Virtual Learning Environment

93
  CMS: Content Management System
 SCORM: Sharable Content Object Reference Model
 LCMS: Learning Content Management System
 Virtual classroom: A digital environment that simulates a physical classroom,
allowing instructors and learners to interact and collaborate in real-time.

2. OVERALL DESCRIPTION

2.1 PRODUCT PRESPECTIVE

The product perspective of an e-learning website involves understanding the

relationship between the website and its users, as well as its place within the broader
educational landscape.

2.2 PRODUCT FUNCTIONS

This software includes details of courses such as:

2.2.1 COURSE CREATION AND MANAGEMENT

The website should allow instructors or administrators to create and manage courses,
including adding course materials, assessments, and assignments.

2.2.2 COURSE DELIVERY

The website should enable learners to access course materials, complete assignments
and assessments, and communicate with instructors and peers.

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.

2.3 USER CLASSES AND CHARACTERISTICS

94
  Learners: The primary user class of an e-learning website is learners. Learners can be
categorized by age, education level, or professional background. They may have
different learning preferences and goals, ranging from acquiring new skills to earning
a degree or certification.
 Instructors: Instructors are responsible for creating and delivering educational
content on the e-learning website. Instructors may have different levels of experience
and expertise, and may specialize in different subjects or areas.
 Administrators: Administrators are responsible for managing the e-learning website
and ensuring that it meets the needs of learners and instructors. Administrators may
include IT staff, educational administrators, or program managers.

2.4 GENERAL CONSTRAINTS

E-learning websites require resources to develop and maintain, including funding,

staffing, and infrastructure. It must provide high-quality content that is relevant, engaging,
and effective for learning. It may face barriers to access, particularly for learners who lack
reliable internet access or who have limited digital literacy.

3. EXTERNAL INTERFACE REQUIREMENTS

3.1 USER INTERFACES

 Course dashboard: The website should provide a dashboard or landing page for each
course that displays important course information, progress tracking, and links to
course materials and assignments.
 Assessments and assignments: The website should enable instructors to create
assessments and assignments with different question types, such as multiple-choice,
fill-in-the-blank, and essay questions, and provide feedback and grading features for
instructors.
 Multimedia content: The website should enable instructors to add multimedia
content such as videos, images, and interactive simulations to course materials, and
provide easy-to-use playback and display controls for learners.

3.2 HARDWARE INTERFACES

95
  Processor : Intel core i3
 Process speed : 1.7 GHz
 Memory : 4GB
 Hard drive : 443

3.3 SOFTWARE INTERFACES

 Operating system : Windows 7,8,10 or 11

 Front End : HTML, BOOTSTRAP, JS
 Back End : MYSQL

4. SYSTEM FEATURES

This system contains 5 modules in it. They are given below:

 Categories
 Courses
 MyLearning
 Community
 Certificate generation

3. UML DIAGRAMS

96
1.USECASE DIAGRAM

2.CLASS DIAGRAM

3.SEQUENCE DIAGRAM

97
4.COLLABORATION DIAGRAM

5.STATECHART DIAGRAM

98
6.ACTIVITY DIAGRAM

7.COMPONENT DIAGRAM

99
8.DEPLOYMENT DIAGRAM

9.PACKAGE DIAGRAM

100
4.CODE

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Neopat</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/
css/bootstrap.min.css">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<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">
<!-- Icon Font 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">
<!-- Libraries Stylesheet -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/logo.jpg">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Neopat</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">

101
 <li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Mylearning.html">MyLearning</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Community</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="Login.html">Log out</a>
</li>
</ul>
</div>
</nav>
<!-- Categories Start -->
<div class="container-xxl py-5 category">
<div class="container">
<div class="text-center wow fadeInUp" data-wow-delay="0.1s">
<h6 class="section-title bg-white text-center text-primary px-3">Categories</h6>
<h1 class="mb-5">Courses Categories</h1>
</div>
<div class="row g-3">
<div class="col-lg-7 col-md-6">
<div class="row g-3">
<div class="col-lg-12 col-md-12 wow zoomIn" data-wow-delay="0.1s">
<a class="position-relative d-block overflow-hidden" href="">
<img class="img-fluid" src="web.avif" alt="">
<div class="bg-white text-center position-absolute bottom-0 end-0 py-2
px-3" style="margin: 1px;">
<h5 class="m-0">Web Design</h5>
<small class="text-primary">301 Courses</small>
</div>
</a>
</div>
<div class="col-lg-6 col-md-12 wow zoomIn" data-wow-delay="0.3s">
<a class="position-relative d-block overflow-hidden" href="">
<img class="img-fluid" src="graphic.jpeg" alt="">
<div class="bg-white text-center position-absolute bottom-0 end-0 py-2
px-3" style="margin: 1px;">
<h5 class="m-0">Graphic Design</h5>
<small class="text-primary">101 Courses</small>

102
 </div>
</a>
</div>
<div class="col-lg-6 col-md-12 wow zoomIn" data-wow-delay="0.5s">
<a class="position-relative d-block overflow-hidden" href="">
<img class="img-fluid" src="video.jpg" alt="">
<div class="bg-white text-center position-absolute bottom-0 end-0 py-2
px-3" style="margin: 1px;">
<h5 class="m-0">Video Editing</h5>
<small class="text-primary">51 Courses</small>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-5 col-md-6 wow zoomIn" data-wow-delay="0.7s" style="min-
height: 350px;">
<a class="position-relative d-block h-100 overflow-hidden" href="">
<img class="img-fluid position-absolute w-100 h-100" src="market.jpg"
alt="" style="object-fit: cover;">
<div class="bg-white text-center position-absolute bottom-0 end-0 py-2 px-3"
style="margin: 1px;">
<h5 class="m-0">Online Marketing</h5>
<small class="text-primary">151 Courses</small>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Categories end -->
<!-- Courses Start -->
<div class="container-xxl py-5">
<div class="container">
<div class="text-center wow fadeInUp" data-wow-delay="0.1s">
<h6 class="section-title bg-white text-center text-primary px-3">Courses</h6>
<h1 class="mb-5">Popular Courses</h1>
</div>
<div class="row g-4 justify-content-center">
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
<div class="course-item bg-light">
<div class="position-relative overflow-hidden">
<img class="img-fluid" src="web.avif" alt="">
<div class="w-100 d-flex justify-content-center position-absolute bottom-0
start-0 mb-4">
<a href="#" class="flex-shrink-0 btn btn-sm btn-primary px-3 border-
end" style="border-radius: 30px 0 0 30px;">Read More</a>

103
 <a href="#" class="flex-shrink-0 btn btn-sm btn-primary px-3"
style="border-radius: 0 30px 30px 0;">Join Now</a>
</div>
</div>
<div class="text-center p-4 pb-0">
<h3 class="mb-0">1490.00</h3>
<div class="mb-3">
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small>(123)</small>
</div>
<h5 class="mb-4">Web Design & Development</h5>
</div>
<div class="d-flex border-top">
<small class="flex-fill text-center border-end py-2"><i class="fa fa-user-tie
text-primary me-2"></i>Jiiva</small>
<small class="flex-fill text-center border-end py-2"><i class="fa fa-clock
text-primary me-2"></i>2.49 Hrs</small>
<small class="flex-fill text-center py-2"><i class="fa fa-user text-primary
me-2"></i>45 Students</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
<div class="course-item bg-light">
<div class="position-relative overflow-hidden">
<img style="height: 235px;" class="img-fluid" src="spread.avif" alt="">
<div class="w-100 d-flex justify-content-center position-absolute bottom-0
start-0 mb-4">
<a href="#" class="flex-shrink-0 btn btn-sm btn-primary px-3 border-
end" style="border-radius: 30px 0 0 30px;">Read More</a>
<a href="#" class="flex-shrink-0 btn btn-sm btn-primary px-3"
style="border-radius: 0 30px 30px 0;">Join Now</a>
</div>
</div>
<div class="text-center p-4 pb-0">
<h3 class="mb-0">1999.00</h3>
<div class="mb-3">
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small>(120)</small>
</div>

104
 <h5 class="mb-4">MS Office</h5>
</div>
<div class="d-flex border-top">
<small class="flex-fill text-center border-end py-2"><i class="fa fa-user-tie
text-primary me-2"></i>Fardeen</small>
<small class="flex-fill text-center border-end py-2"><i class="fa fa-clock
text-primary me-2"></i>3.49 Hrs</small>
<small class="flex-fill text-center py-2"><i class="fa fa-user text-primary
me-2"></i>49 Students</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
<div class="course-item bg-light">
<div class="position-relative overflow-hidden">
<img style="height: 235px;" class="img-fluid" src="business.jpg" alt="">
<div class="w-100 d-flex justify-content-center position-absolute bottom-0
start-0 mb-4">
<a href="#" class="flex-shrink-0 btn btn-sm btn-primary px-3 border-
end" style="border-radius: 30px 0 0 30px;">Read More</a>
<a href="#" class="flex-shrink-0 btn btn-sm btn-primary px-3"
style="border-radius: 0 30px 30px 0;color: #000;">Join Now</a>
</div>
</div>
<div class="text-center p-4 pb-0">
<h3 class="mb-0">9500.00</h3>
<div class="mb-3">
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small class="fa fa-star text-primary"></small>
<small>(203)</small>
</div>
<h5 class="mb-4">Cyber Security</h5>
</div>
<div class="d-flex border-top">
<small class="flex-fill text-center border-end py-2"><i class="fa fa-user-tie
text-primary me-2"></i>Tarun</small>
<small class="flex-fill text-center border-end py-2"><i class="fa fa-clock
text-primary me-2"></i>10.49 Hrs</small>
<small class="flex-fill text-center py-2"><i class="fa fa-user text-primary
me-2"></i>99 Students</small>
</div>
</div>
</div>
</div>
</div>

105
 </div>
<!-- Courses End -->
<!-- Footer start -->
<footer class="bg-light py-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<h4>About Us</h4>
<p>We are an online learning platform that offers courses in various
subjects.</p>
</div>
<div class="col-md-4">
<h4>Quick Links</h4>
<ul class="list-unstyled">
<li><a href="index.html">Home</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="mylearning.html">MyLearning</a></li>
<li><a href="com.html">Community</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Contact Us</h4>
<p>123, Srit Street,<br>Srit, Coimbatore 641010,<br>Phone: (123) 456-
7890<br>Email: [email protected]</p>
</div>
</div>
<hr>
<p class="text-center">© 2023 eLearning Website. All Rights Reserved.</p>
</div>
</footer>
<!-- Footer end -->
</body>
</html>

Enroll.html

<section class="py-5">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card">
<div class="card-header">
<h3 class="mb-0">Enroll Now</h3>
</div>
<div class="card-body">
<form>
<div class="form-group">

106
 <label for="name">Full Name</label>
<input type="text" class="form-control" id="name"
placeholder="Enter your full name">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email"
placeholder="Enter your email address">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" id="phone" placeholder="Enter
your phone number">
</div>
<div class="form-group">
<label for="course">Course</label>
<select class="form-control" id="course">
<option>Full Stack Web Development</option>
<option>Cyber Security</option>
<option>Data Science</option>
<option>Ethical Hacking</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

Login.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Neopat</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/
css/bootstrap.min.css">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

107
 <link href="https://fonts.googleapis.com/css2?
family=Heebo:wght@400;500;600&family=Nunito:wght@600;700;800&display=swap"
rel="stylesheet">
<!-- Icon Font 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">
<!-- Libraries Stylesheet -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/logo.jpg">
</head>
<body class="bg-light">
<div class="container">
<div class="card" style="width:100%">
<table>
<tr>
<td>
<img src="img/login_bg.svg" style="padding:10px">
</td>
<td><center>
<img class="card-img-top" src="img/logo.jpg" alt="Card Image"
style="width:100px">
<div class="card-body">
<h2 class="card-title">Sri Ramakrishna Institute of Technology</h2>
</center>
<form style="padding:50px">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><br>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp" placeholder="Enter email"><br>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><br>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
<input type="checkbox" onclick="myFunction()">Show Password<br><br>
</div>
<a href="index.html"> <button type="button" class="btn
btn-primary">Submit</button></a>
</form>

108
 </td>
</tr>
</table>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("exampleInputPassword1");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
</html>

Mylearning.html

<div class="container mt-4">

<div class="jumbotron">
<h1 class="display-4">Welcome to My Learning!</h1>
<p class="lead">Here you can track your progress, view your courses, and access
your certificates.</p>
<hr class="my-4">
<p>Get started by selecting a course from the list below.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">View Courses</a>
</div>
<div class="row">
<div class="col-md-8">
<h2>My Courses</h2>
<p>You are currently enrolled in the following courses:</p>
<ul>
<li>Full Stack Web Development</li>
<li>Data Science</li>
<li>Cyber Security</li>
</ul>
</div>
<div class="col-md-4">
<h2>My Certificates</h2>
<p>You have earned the following certificates:</p>
<ul>
<li><a href="img/Ethical Hacking.jpg" target="_blank">Ethical
Hacking</a></li>

109
 <li><a href="img/GuviCertification.png" target="_blank">Artificial
Intelligence</a></li>
</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 class="progress-bar" role="progressbar" style="width: 75%;" aria-
valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<p class="mt-2 mb-0">Cyber Security</p>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-
valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<p class="mt-2 mb-0">Data Science</p>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-
valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<p class="mt-2 mb-0">Full Stack Web Development</p>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 5%;" aria-
valuenow="1" aria-valuemin="0" aria-valuemax="100">1%</div>
</div>
</div>
</div>
</div>
</section>

110
5.OUTPUT

111
112
113
CONCLUSION

In conclusion, an e-learning website is a powerful tool for delivering education and

training to learners in a flexible and accessible format. With the right design and
implementation, an e-learning website can provide a wide range of features and
functionalities that enable learners to access course materials, interact with instructors and
peers, and track their progress and performance. Key considerations for the design of an e-
learning website include user needs and preferences, technical constraints, and design
principles such as navigation, multimedia content, assessments and assignments,
collaboration and communication, personalization, mobile optimization, accessibility, and
branding and aesthetics. By carefully considering these factors and designing an e-learning
website that meets the needs of its users, educational institutions and organizations can
provide an effective and engaging learning experience that can enhance the skills and
knowledge of learners and support their professional development . Thus the implementation
of E-Learning System has been verified and executed successfully.

114