Wa0015.

Objective
Create a web application using HTML, CSS, Javascript to visualize how various sorting algorithms
work. This project’s functionality will be similar to this application.
Project Context :
Businesses, in any field, have a lot of competition. They are always on the lookout
for a proven way to increase their business revenue. Restaurants, retail shops, vape
stores - whatever a business may want to sell, if the business doesn’t have an
ecommerce website, they are leaving money on the table!
The world has moved online – a fact that businesses have to accept and put up a
website to address. Amazon is a prime example of a website with all the key
elements making up a good e-commerce site.
The e-commerce website of Amazon was initially put together with simple HTML,
CSS and JavaScript. But as time progressed and different frameworks came into the
limelight, the website got a makeover.
Through this project, we’ll discover a way to build a functional website for a
Bussiness that is Universal Bio for product management.
Project Stages
The project consists of the following stages:
Primary goals
• Create header/navigation bar to navigate between pages.
• Create a home page to display products.
• Create a login page for user login.
Add functionalities like basket, payment and authentication
High-Level Approach
Creating the website’s User Interface (UI) using HTML, CSS and enhancing it further using
Bootstrap; without actually implementing any of the app’s core features.
Implementation of animations, effects and core functionalities (sorting algorithms) using
JavaScript.
Publish to GitHub and host your project live using Netlify.
SYSTEM REQUIREMENTS
Hardware Requirements:-
Processor : 1.0(GHz) Pentium processor
RAM : 512MB
HDD : 80GB Display : 1024 x 768 High color-32-bit
Software Requirements:-
Browser : Google Chrome
Database : MySQL (IDE –phpmyadmin)
Operating System : Windows 7
Editor : VS Code
Backend : WAMP SERVER 3
HTML
First developed by Tim Berners-Lee in 1990, HTML is short for Hypertext Markup Language.
HTML is used to create electronic documents (called pages) that are displayed on the World
Wide Web. Each page contains a series of connections to other pages called hyperlinks. Every
web page you see on the Internet is written using one version of HTML code or another. HTML
code ensures the proper formatting of text and images so that your Internet browser may
display them as they are intended to look. Without HTML, a browser would not know how to
display text as elements or load images or other elements. HTML also provides a basic structure
of the page, upon which Cascading Style Sheets are overlaid to change its appearance. One
could think of HTML as the bones (structure) of a web page, and CSS as its skin (appearance)
List Of Diagram
Index Page
About Us
Products
Our Policy
Contact Us
Coding Of Project
Index.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=devicewidth, initial-scale=1.0">
<title>Document</title>

<link
href="https://cdn.jsdelivr.net/npm/[email protected].
0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wS
X0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"> <script
src="https://cdn.jsdelivr.net/npm/[email protected]
-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8
z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core
@2.6.0/dist/umd/popper.min.js"
integrity="sha384-
KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8
agRGXTTyNaBYmCR/Nwi"
<script
-beta2/dist/js/bootstrap.min.js"
integrity="sha384-
nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72
MMONqmOymq585AcH49TLBQObG"
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<header id="header" class="fixed-top d-flex
align-items-center ">
<div class="header-container d-flex

alignitems-center justify-content-between">
<div class="logo">
<h1 class="text-light"><a
href="index.html"><img src="img/logo.png"
height="80px"
alt=""></a>
</h1>


</div>
<nav id="navbar" class="navbar my-1">
<ul>
<li><a class="getstarted scrollto
active" href="index.html">Home</a></li>
<li><a class="getstarted scrollto"
href="about_us.html">About Us</a></li>
href="products.html">Products</a></li>
<li><a class="getstarted scrollto "
href="our_policy.html">Our Policy</a></li>
href="contact.html">Contact Us</a></li>

</ul>

</nav>
</div>
</header>
<section class=" align-items-center">
<div>
<img src="img/CONTACT (3).jpg"
style="width: 100%;">
</div>
</div>
</section>
<main>
<div class=" row">
<div class="col-sm-8 my-5 mx-3">

<h2 class="pro"><strong >Contact
Information</strong>
</h2>
<h5>Thank you for your interest in
learning more about our company. We care about
your questions and
concerns.</h5>
<div id="contact_form">
<form method="post"
name="contact" action="/svf1">
<p>
<label
for="author">Name:</label>
<input type="text" id="author"
name="author" class="required input_field" />
</p>
<p>
<label
for="email">Email:</label>
<input type="text" id="email"
name="email" class="required input_field" />
</p>
<p class="no_margin_right">
<label
for="contact_number">Contact No:</label>
<input type="text"
name="contact_number" id="contact_number"
class="input_field" />
</p>
<div class="clear h20"></div>
<label
for="text">Message:</label>
<textarea id="text"
name="message" rows="0" cols="0"
class="required"></textarea>
<input type="submit"
value="Send" id="submit" name="submit"
class="submit_btn float_l" />
<input type="reset"
value="Reset" id="reset" name="reset"
class="submit_btn float_r" />
</form>
</div>
</div>

</a><img style="float:right;" alt=""

src="img/twit.png" class="me-4"><a></a>
<a><img style="float:right;" alt=""
src="img/linkedin.png" class="me-4"></a>
</div>
</div> </footer> </div></body></html>
About Us
<html lang="en"><head>
content="IE=edge">
<title>About_us</title>
<link
rel="stylesheet" crossorigin="anonymous"
integrity="sha384-
X0szH/Ev+nYRRuWlolflfl">
<script
crossorigin="anonymous"
integrity="sha384b5kHyXgcpbZJO/tY9Ul7kGkf1S0C
WuKcCD38l8YkeH8
z8QjE0GmW1gYU5S9FOnJ0"></script>
<script
integrity="sha384KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+
NdBTt13hSJ2lnve8
agRGXTTyNaBYmCR/Nwi"></script>
<script
integrity="sha384nsg8ua9HAw1y0W1btsyWgBklPnC
UAFLuTMS2G72
MMONqmOymq585AcH49TLBQObG"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="fixed-top d-flex align-
itemscenter " id="header">

<div class="logo">
href="index.html"><img height="80" alt=""
src="img/logo.png"></a>
</h1>
</div>
<nav class="navbar my-1" id="navbar">

<ul>
</ul>
navtoggle"></i> -->
</div>
</header>
<div>
<img style="width: 100%;"
src="img/ABOUT.jpg">
</div>
</div>
</section>


<main>
<div class="row">
<h2 class="pro"><strong>About Our
Company</strong></h2>
<p class="my-5" style="text-align:
justify;">Universal Bio was established in 2007 as a
manufacturer of scientific and plastic ware
products, and is dedicated to supplying the
life-science industries as well as academia, both
nationally and internationally.
Over the years, we have established a reputation for
excellence in the field of Biotechnology products.
The cutting-edge developments made by our
Research Teams have led to shorter project delivery
times, whilst maintaining the high quality of the
products. Biotex Scientific remains dedicated to
providing a to the Biotech Product manufacturing
industry, by continuing to increase its development
program of enhancing the prospects of obtaining
new features.<br> At Biotex we operate a stringent
quality system which verifies that the products we
supply, meet or exceed industry
standards. Our Quality Control (QC) team ensures
that our instrumentation, operating/ testing, and
staff training
are maintained and continually updated to achieve
these high standards. We are ISO9001: 2008
(Certificate: Q 2156/12) accredited for the design,
manufacture and supply of custom peptides,
antibodies and peptide related products.
With the increasing focus on products, we offer a
complete solution to the scientific industry, by
supplying world class
products.
We believe that strong customer relations are the
key to our success. Our team of highly qualified staff
is dedicated
to provide an unrivalled customer service, ensuring
effective project management and good
communication with our
clients, thus facilitating to promote and assist
customer program planning. From sales to product
delivery, we aspire
to offer a complete solution. We trust that you will
enjoy the benefits of working with Biotex Scientific,
as a reliable, flexible and innovative Biotech
Instruments manufacturer.
</p>
</div>
<div class="col-sm-2">
<img width="350" height="400"
src="img/aboutus-removebg-preview.png">
</div>
</div>

</main>
<div class="row">

Awasthi</a></p>
</div>
<a><img class="me-4" style="float: right;"
src="img/fb.png">
</a><img class="me-4" style="float: right;"

alt="" src="img/twit.png"><a></a>
alt="" src="img/linkedin.png"></a>
</div>
</div>
</footer>
</div>
</body></html>
Products
<!DOCTYPE html>
content="IE=edge">
<title>Products</title>
<link
integrity="sha384-
<script
WuKcCD38l8YkeH8
<script
NdBTt13hSJ2lnve8
<script
UAFLuTMS2G72
<script src="js/jquery1-4-2.min.js"
type="text/javascript"></script>
<link href="css/slimbox.css" rel="stylesheet"
type="text/css" media="screen"> <script
src="js/slimbox.js"
type="text/JavaScript"></script>
</head>
<body>
<header class="fixed-top d-flex align-items-center
" id="header">
<div class="header-container d-flex align-

itemscenter justify-content-between">
<div class="logo">
</h1>

</div>

<ul>
<li><a class="getstarted scrollto active"
href="index.html">Home</a></li>
</ul>

</div>

</header>

<div>
src="img/prod.jpg">
</div>
</div>
</section>
<main>
<hr>
<div class="row my-5">
<h2 style="text-align: center;"><strong
class="pro">Range of Products</strong></h2>
</div>
<div class="row my-5 justify-content-center
textcenter ">
<div class="col-sm-3 my-5 ">
<div class="card ">
<img class="card-img-top" alt="..."
src="img/SCIENTFIC.jpg">
<div class="card-body">
<a class="btn butt" role="button"

ariadisabled="true"
href="scientific_product.html">Scientiic
Product</a>
</div>
</div>
</div>

<div class="card">
src="img/PLASTIC.jpg">


<button class="btn butt" type="button"
data-bs-target="#exampleModa2" data-
bstoggle="modal">
Plastic Products
</button>


<div tabindex="-1" class="modal fade"
id="exampleModa2" aria-hidden="true"
arialabelledby="exampleModalLabel">
<div class="modal-dialog pro">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">Plastic Products</h5>
<button class="btn-close"
arialabel="Close" type="button" data-
bsdismiss="modal"></button>
</div>
<div class="modal-body ">
<p style="text-align: justify;">
Universal Bio is a proactive company
and has always laid emphasis on innovation and
quality.
To fulfill our corporate mission
"Providing Quality Products" we have steadily
expanded our
infrastructure to include state-of-
theart Research and Development centers and
facilities complying with iso standards,
linked together by strong Information Technology
backbone.
</p>
</div>
<div class="modal-footer">
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3 my-5">
<div class="card ">
src="img/other.jpg">


data-bs-target="#exampleModa3" data-
bstoggle="modal">
Other Products
</button>

<div tabindex="-1" class="modal fade"
id="exampleModa3" aria-hidden="true"
arialabelledby="exampleModalLabel">
<div class="modal-dialog pro">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">Other Products</h5>
<button class="btn-close"
arialabel="Close" type="button" data-
bsdismiss="modal"></button>
</div>
<div class="modal-body">
Page is Under Construction

</div>
<div class="modal-footer">
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="row">

Awasthi</a></p>
</div>
src="img/fb.png">
src="/univarsalbio/img/wts.png" class="me-4"> -->
</a><img class="me-4" style="float: right;" alt=""
src="img/twit.png"><a></a>
</div>
</div>
</footer>
</div>


</body></html>
Our Policy
content="IE=edge">
<link
integrity="sha384-
<script
WuKcCD38l8YkeH8
<script
NdBTt13hSJ2lnve8
<script
UAFLuTMS2G72
</head>
<body>

<div class="logo">
</h1>
</div>

<ul>
</ul>
navtoggle"></i> -->
</div>
</header>
<div>
src="img/policy (1).jpg">
</div>
</div>
</section>
<main>
<div class="my-5 row">
<div class="col-sm-8 my-5 mx-3"><hr>

<h2 class="pro"><strong>Terms &
Conditions</strong></h2>
<ul class="my-5" text-align="justify">
<li class="my-5">Sales Tax will be
charged extra as applicable at the time of
delivery.</li>
<li class="my-5">One third payment

should accompany with the order and balance will
be drawn through bank against documents.</li>
<li class="my-5">All our instruments
are warranted for a period of 12-18 months from
the date of dispatch.</li>
<li class="my-5">The warrantee does
not cover parts which are not of our manufacture
and which are fragile.</li>
<li class="my-5">All Designs and
Specifications are subject to change without any
prior notice.</li>
<li class="my-5">Regular discount
structure does not implement on imported
instruments.</li>
<li class="my-5">Disputes if any,
subject to Jurisdiction of Lucknow, Varanasi
only.</li>
<li class="my-5">All Imported
Instruments is to be ordered with 100% advance
payment.</li>
</ul><hr>
</div>

src="img/termsbg.png">
</div>
</div>
</main>
<div class="row">

Awasthi</a></p>
</div>
src="img/fb.png">
</a><img class="me-4" style="float:

right;" alt="" src="img/twit.png"><a></a>
</div>
</div>
</footer>
</div>
</body></html>
Contact Us
<!DOCTYPE html>
content="IE=edge">
<link
integrity="sha384-
<script
WuKcCD38l8YkeH8
<script
NdBTt13hSJ2lnve8
<script
UAFLuTMS2G72
</head>
<body>

<div class="logo">
</h1>
</div>

<ul>
</ul>
navtoggle"></i> -->
</div>
</header>
<div>
src="img/CONTACT (3).jpg">
</div>
</div>
</section>
<main>
<div class=" row">

<h2 class="pro"><strong>Contact
Information</strong>
</h2>
<h5>Thank you for your interest in
learning more about our company. We care about
your questions and
concerns.</h5>
<div id="contact_form">
<form name="contact" action="/svf1"
method="post">
<p>
<label
for="author">Name:</label>
<input name="author"
class="required input_field" id="author"
type="text">
</p>
<p>
<label
for="email">Email:</label>
<input name="email"
class="required input_field" id="email"
type="text">
</p>
<p class="no_margin_right">
<label
for="contact_number">Contact No:</label>
<input
name="contact_number" class="input_field"
id="contact_number" type="text">
</p>
<label
for="text">Message:</label>
<textarea name="message"
class="required" id="text"></textarea>
<input name="submit"
class="submit_btn float_l" id="submit"
type="submit" value="Send">
<input name="reset"
class="submit_btn float_r" id="reset" type="reset"
value="Reset">
</form>
</div>
</div>
<!-- <h4><b>"Varanasi" Office,</b></h4> --
>
<div class="col-sm-2 my-5 mx-5 "
style="text-align: justify;">

src="img/CONTCT.png">
</div>
</div>
<div class="row">
center;">
<h1><strong>Biotex Scientific
Co.</strong></h1><br><hr>
</div>
center;">
<h4><b>"Varanasi" Office,</b></h4>
<p> C-27/159, Ram Bhawan, Jagat
Ganj,<br>
Varanasi, Uttar Pradesh, India.<br>Pin -
221002<br>
<strong>Phone : </strong> 0542-
2201065 ,09415201882<br>
<strong>Email:
</strong>[email protected],<br>
[email protected]<br></p><br><
p></p>
</div>
center;">
<h4><b>"Lucknow" Office</b></h4>
<p>521/175,A Bara Chandganj, B. P.
Marg<br>
Near Shani Dham Mandir,
Kapoorthala,<br>
Lucknow, Uttar Pradesh, India.<br>Pin -
226006<br>
<strong>Phone : </strong> 9415201882,
8090004240<br>
<strong>Email:</strong>[email protected],<b
r>[email protected]<br><br></p
><p></p>
</div>
</div>
</main>
<div class="row">

Awasthi</a></p>
</div>
src="img/fb.png">
</a><img class="me-4" style="float:

right;" alt="" src="img/twit.png"><a></a>
</div>
</div>
</footer>
</div></body>
</html>
TESTING
Testing of a project is the process of determining all the proposed options in the project work
documented. It is done before the delivery of the project to the customer and make sure there are no
failures in the system.
Testing Objectives
• Testing is a process of executing a program with the intent of finding errors.
• A good test case is one that has a high probability of finding an as yet undiscovered error.
• A successful test is one that uncovers an as yet undiscovered error.
This project has been tested using following testing methods:

• Unit Testing
• Integrated Testing
Unit Testing
Unit testing is the procedure used to validate that individual units of source code are working properly.
This is done at the development level (coding). Integration Testing Integrity and testing, it is the phase of
software testing in which individual modules are combined and tested as a group. It follows unit testing
and precedes system testing.

Thank You

Wa0015.

Uploaded by

Copyright:

Available Formats

Wa0015.

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Wa0015.

Uploaded by

Copyright:

Available Formats

Objective

Add functionalities like basket, payment and authentication

<div class="header-container d-flex

<div class="col-sm-8 my-5 mx-3">

<p>Copyright © 2023 &nbsp;<a

</a><img style="float:right;" alt=""

<div class="header-container d-flex

<nav class="navbar my-1" id="navbar">

<p>Copyright © 2023 &nbsp;<a

</a><img class="me-4" style="float: right;"

<div class="header-container d-flex align-

<nav class="navbar my-1" id="navbar">

</header>

<a class="btn butt" role="button"

<div class="col-sm-3 my-5 ">

Page is Under Construction

<p>Copyright © 2023 &nbsp;<a

<div class="header-container d-flex

<nav class="navbar my-1" id="navbar">

<div class="col-sm-8 my-5 mx-3"><hr>

<li class="my-5">One third payment

<div class="col-sm-2 my-2 ">

<p>Copyright © 2023 &nbsp;<a

</a><img class="me-4" style="float:

<div class="header-container d-flex

<nav class="navbar my-1" id="navbar">

<div class="col-sm-8 my-5 mx-3">

<img width="300" height="270"

<p>Copyright © 2023 &nbsp;<a

</a><img class="me-4" style="float:

This project has been tested using following testing methods:

and precedes system testing.

You might also like

<p>Copyright © 2023 <a

<p>Copyright © 2023 <a

<p>Copyright © 2023 <a

<p>Copyright © 2023 <a

<p>Copyright © 2023 <a