SUMMER TRAINING PROJECT REPORT-2019(3RD

Batch)

A PROJECT ON VIDEO LECTURE

MANAGEMENT SYSTEM(VLMS)
FOR CAMPUS AREA

Submitted By:-
Suman Mohanty
Under the guidance of:
Dibyajyoti Sahu
Mr.A.K. SAHU Sc-‘F’.GD[CAN]
Kunal Roy Mr. A. PATRA Sc- ‘D’ [CAN]
Anurag Mohapatra Smt.MANORAMA PARIDA-‘JRF’
 ACKNOWLEDGEMENT
The Completion of our project not only includes our perseverance but
also the efforts of our guides, mentors and our family members.

We would like to express our deep sense of gratitude to the Dr. B.K.
Das, Sc- ‘H’ (OS), Director, ITR, DRDO and also HRD group for
having me to carry out this Summer Training under CAN group.

We would like to express our deepest appreciation to Mr. Anup Kumar

Sahu Sc- ‘F’, Group Director, CAN, for support and guidance in
various fields towards the completion of training successfully. We
humbly acknowledge our guide and mentor for the project Mr. A.
PATRA Sc- ‘D’ of CAN group for assigning US with project. His
guidance, effort and useful suggestion encouraged us to complete all
the works assigned successfully within the given timespan.

Our project wouldn’t have been complete without the valuable

guidance and help of Mrs. Manorama Parida, JRF, CAN .We
appreciate the efforts of every members of CAN group who were
involved in the slightest of way in our project.

Primarily, We would thank Almighty GOD for being able to complete

our project with success .Finally, in the accomplishment of this training
successfully, many people have best owned towards us with hearted
support and help with lots of love and care.
 CERTIFICATE
This is to certify that the project
report entitled “Video Lecture
Management Systems”, submitted by
the group constituting Suman
Mohanty(SMIT),Dibyajyoti Sahu(KIIT),
Kunal Roy(KIIT) and Anurag
Mohapatra(KIIT) for the award of
Summer Training in ITR(DRDO),Balasore
Odisha, India, is a Bonafede record
of work carried out by them under my
guidance. Neither this project
report nor any part of it has been
submitted for any degree or academic
award elsewhere. During the Summer
Training June-July2019 in partial
fulfilment for the award of Degree
of Bachelor of Technology Offered by
ITR, DRDO, CHANDIPUR

Signature of Guide Signature of GD(CAN) Signature of HRD

 DRDO:-An Introduction
DRDO (Defense Research and Development Organization) was
established in 1958 by amalgamating Defense Science
Organization and some of the technical development
establishments. A separate Department of Defense Research and
Development was formed in 1980 which now administers DRDO
and its 50 laboratories. DRDO was directed by Dr. A.P.J. Abdul
kalam, who was director of the defense Research and Development
laboratory (DRDL) responsible for India’s missile development
programme

The defense research and development Laboratory(DRDL) ,

Hyderabad was established in 1962 as part of the major strategy to
develop missile systems, with the responsibilities to design,
develop and produce various missile system and subsystems
requires by services from 1962.By 1983 the DRDL successfully
established the basic technological resources required for the
development of missile system such as solid ,liquid and ramjet
propulsion technology, control and guidance engineering and
design & fabrication facilities etc. These efforts led to the sanction
of a major program called integrated guided Missiles development
program (IGMDP) in July 1983. This program included
development of five different of five different type of missile
system to meet the futuristic requirements of the Armed Forces .

LABS OF DRDO IN LEXICOGRAPHICALLY

1. Advanced Centre for Energetic Materials (ACEM) , Nasik

2. Aeronautical Development Establishment (ADE) , Bangalore
3. Aerial Delivery Research and Development Establishment (ADRDE) , Agra
4. Advanced Numerical Research & Analysis Group (ANURAG) , Hyderabad
5. Armament Research & Development Establishment (ARDE) , Pune
6. Centre for Advanced Semiconductor Technology (ASEMIT) , Delhi
7. Centre For Air Borne System (CABS) , Bangalore
8. Centre for Artificial Intelligence & Robotics (CAIR) , Bangalore
9. Centre for Military Airworthiness & Certification (CEMILAC) , Bangalore
10. Centre for Fire, Explosive and Environment Safety (CFEES) , Delhi
11. Combat Vehicles Research & Development Estt. (CVRDE) , Chennai
12. Defence Avionics Research Establishment (DARE) , Bangalore
13. Defence Electronics Application Laboratory (DEAL) , Dehradun
14. Defence Bio-Engineering & Electro Medical Laboratory (DEBEL) ,
Bangalore
15. Defence Scientific Information & Documentation Centre (DESIDOC) , Delhi
16. Defence Food Research Laboratory (DFRL) , Mysore
17. Defence Institute of Advanced Technology (DIAT) , Pune
18. Defence Institute of Bio-Energy Research (DIBER) , Haldwani
19. Defence Institute of High Altitude Research (DIHAR) , Leh Ladakh
20. Defence Institute of Physiology & Allied Sciences (DIPAS) , Delhi
21. Defence Institute of Psychological Research (DIPR) , Delhi
22. Defence Laboratory (DLJ) , Jodhpur
23. Defence Electronics Research Laboratory (DLRL) , Hyderabad
24. Defence Metallurgical Research Laboratory (DMRL) , Hyderabad
25. Defence Materials and Stores Research and Development Establishment
(DMSRDE) , Kanpur
26. Defence Research & Development Establishment (DRDE) , Gwalior
27. Defence Research & Development Laboratory (DRDL) , Hyderabad
28. Defence Research Laboratory (DRL) , Tejpur
29. Defence Terrain Research Laboratory (DTRL) , Delhi
30. Gas Turbine Research Establishment (GTRE) , Bangalore
31. High Energy Materials Research Laboratory (HEMRL) , Pune
32. Institute of Nuclear Medicine & Allied Sciences (INMAS) , Delhi
33. Instruments Research & Development Establishment (IRDE) , Dehradun
34. Institute for Systems Studies & Analyses (ISSA) , Delhi
35. Institute of Technology Management (ITM) , Mussorie
36. Integrated Test Range (ITR) , Balasore
37. Laser Science & Technology Centre (LASTEC) , Delhi
38. Electronics & Radar Development Establishment (LRDE) , Bangalore
39. Microwave Tube Research & Development Centre (MTRDC) , Bangalore
40. Naval Materials Research Laboratory (NMRL) , Ambernath
41. Naval Physical & Oceanographic Laboratory (NPOL) , Cochin
42. Naval Science & Technological Laboratory (NSTL) , Vishakapatnam
43. Proof & Experimental Establishment (PXE) , Balasore
44. Research Centre Imarat (RCI) , Hyderabad
45. Research & Development Establishment (RDE(E)) , Pune
46. Scientific Analysis Group (SAG) , Delhi
47. Snow & Avalanche Study Estt (SASE) , Chandigarh
48. Solid State Physics Laboratory (SSPL) , Delhi
49. Terminal Ballistics Research Laboratory (TBRL) , Chandigarh
50. Vehicle Research & Development Establishment (VRDE) , Ahmednagar
 About Integrated Test Range

Integrated Test range (ITR) is a DRDO establishment and is reputed as the premier
test range of the country. ITR is credited for its state-of-the-art facilities with
consistent and promising services and performance. It is an ISO 9001-2015 certified
laboratory. It is located at chandipur of the Odisha state in the south-eastern part of
India.

Test and Evaluation in the Test range

I. Advanced systems and technologies for range applications
II. Instrument calibration and error analysis
III. Quality standard and quality assurance in flight critical systems
IV. Timing standards and Synchronization in Range

Electro-optics, Image processing & Computer Vision

I. Image processing, computer vision & computer graphics
II. Infrared Imaging system
III. Long range optics & telescopic tracking
IV. Automatic target detection & tracking

Emerging technologies in Rader

I. Antenna technology
II. Beam forming in phased array radar
III. Microwave tubes, solid state devices and circuits
IV. Rader signal processing
Telemetry communication & Networking
I. Onboard instrumentation
II. Modulation, coding 7 encryption
III. Optical network
IV. Software Defined Radio
V. Satellites for communication and telemetry
CAN AND DATA CENTRE
Integrated Test Range is an ISO 9001-2015 Organization. Here the
entire process are well documented and requires meticulous
adherence to the laid down procedures. Moreover, this organization
is striving hard to convert the entire management into e-
management. Further all work centers are network, keeping these
objectives in view and combining all the work Centre like Admin,
Finance, HRD, Director’s Secretariat, Integrated Material
Management and other directors into an Integrated network
through Campus Area Network is CAN.

Video Lectures :-A Boon

1. Easy to access anytime
With video lectures, your students can learn anywhere from their
mobile devices: laptops, tablets or smartphones. Just make sure the
format of your lecture is supported on all devices.
2. Learn whenever you want
Let your students enjoy the process of learning whenever they
want. Just upload your video lectures online and send your students
a link.
3. Learning at an individual pace
Every teacher knows that each student has his own pace of
learning. With video lectures, all students can learn at their own
individual pace, which will maximize the results of e-Learning.
4. Many ways to use
Video lectures are widely recognized as a type of distance learning.
However, you can also use them in your in-class teaching. Such an
innovative approach to teaching will engage your student and
encourage your colleagues.
5. Easy to deliver
You can provide students with unlimited access to all your learning
materials by uploading video lectures to the Web or LMS.
Alternatively, you can create a CD or send your lecture by email.
6. More effective learning
If a student happens to miss one of your lectures, you can send him
the link to the lecture video (or simply make regular posts on your
blog or website for all students to access at their convenience).
This allows all your students to keep up with the curriculum.
7. Opportunity for self-study
In your interactive video lecture, you can refer to more useful
materials and resources for self-study. Also, you can record an
additional lecture that complements in-class activities.
8. Chance for self-testing
Video lectures can be especially useful for the teacher himself.
Using the recording of the lecture, the teacher can take a look at his
presenting skills to find out what can be improved.

ABSTRACT/BRIEFING
Video Lecture Management System is a web application designed to make
the video lectures of different departments and courses available for the
employees. The web-based video lecture management system makes the
whole process of data storage and maintenance easier by storing the videos
under particular folders in the hard disk of the server. Not using a database
to store information helps in making the process of data storage and
retrieval administrator friendly. The web-based video lecture management
system makes the process of viewing and searching lectures user friendly.
Video Lectures can now be viewed in a single click.
The web-application is programmed with HTML for the static layout and
frame work. The mark-up language is accompanied by CSS, which is a
stylesheet language used for proper presentation of document. It enables the
independency of content and presentation, resulting in a standalone neat
application.
In the VLMS PHP has been used so the contents of it can dynamically
manipulated in the process of creation. PHP as a server-side language is
usually used to program the manipulation of web pages made with HTML.
The implementation of JavaScript results in a dynamic and enhances the
interaction of a user with webpage.
JavaScript can enhance the interfaces HTML gives us. While it is nice to
have a text input box you might want to have a combo box allowing you to
choose from a list of preset values or enter your own. Using JavaScript, you
can enhance a normal input box to do that.
In the following pages of the report we will look into the key aspects of the
used languages, different modules of application developed and briefing of
key features of the portal along with source code and sample images of
application in the form of Screenshots,

Insight to the building blocks of the project

HTML
HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph",
"table", and so on
  Browsers do not display the HTML tags, but use them to render the
content of the page
Hypertext Markup Language (HTML) is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages
such as JavaScript. Web browsers receive HTML documents from a web
server or from local storage and render the documents into multimedia web
pages. HTML describes the structure of a web page semantically and
originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be
embedded into the rendered page. HTML provides a means to create
structured documents by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes and other items. HTML elements
are delineated by tags, written using angle brackets. Tags such as <img />
and <input /> directly introduce content into the page. Other tags such as
<p> surround and provide information about document text and may
include other tags as sub-elements. Browsers do not display the HTML
tags, but use them to interpret the content of the page.
HTML can embed programs written in a scripting language such as
JavaScript, which affects the behaviour and content of web pages. Inclusion
of CSS defines the look and layout of content. The World Wide Web
Consortium (W3C), former maintainer of the HTML and current maintainer
of the CSS standards, has encouraged the use of CSS over explicit
presentational HTML since 1997.

Features of HTML:
1. Web Workers: Certain web applications use heavy scripts to perform
functions. Web Workers use separate background threads for
processing and it does not effect the performance of a web page.
2. Video: You can embed video without third-party proprietary plug-ins
or codec. Video becomes as easy as embedding an image.
3. Canvas: This feature allows a web developer to render graphics on the
fly. As with video, there is no need for a plug in.
4. Application caches: Web pages will start storing more and more
information locally on the visitor's computer.
CSS
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or
in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at
once
 External stylesheets are stored in CSS files
 Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a mark-up language like HTML. CSS is a
cornerstone technology of the World Wide Web, alongside HTML and
JavaScript.
 CSS is designed to enable the separation of presentation and content, including
layout, colours, and fonts. This separation can improve content accessibility,
provide more flexibility and control in the specification of presentation
characteristics, enable multiple web pages to share formatting by specifying the
relevant CSS in a separate .CSS file, and reduce complexity and repetition in
the structural content
 Separation of formatting and content also makes it feasible to present the same
mark-up page in different styles for different rendering methods, such as on-
screen, in print, by voice (via speech-based browser or screen reader), and on
Braille-based tactile devices. CSS also has rules for alternate formatting if the
content is accessed on a mobile device
PHP
PHP as a server-side language is usually used to program the manipulation If
web pages made with HTML
 PHP is a recursive acronym for "PHP: Hypertext Preprocessor".
 PHP is a server side scripting language that is embedded in HTML. It is used to
manage dynamic content, databases, session tracking, even build entire e-
commerce sites.
 It is integrated with a number of popular databases, including MySQL,
PostgreSQL, Oracle, Sybase, Informix, and Microsoft SQL Server.
 PHP is pleasingly zippy in its execution, especially when compiled as an
Apache module on the Unix side. The MySQL server, once started, executes
even very complex queries with huge result sets in record-setting time.
  PHP supports a large number of major protocols such as POP3, IMAP, and
LDAP. PHP4 added support for Java and distributed object architectures (COM
and CORBA), making n-tier development a possibility for the first time.
 PHP is forgiving: PHP language tries to be as forgiving as possible.
 PHP Syntax is C-Like.
Common uses of PHP
 PHP performs system functions, i.e. from files on a system it can create, open,
read, write, and close them.
 PHP can handle forms, i.e. gather data from files, save data to a file, through
email you can send data, return data to the user.
 You add, delete, modify elements within your database through PHP.
 Access cookies variables and set cookies.
 Using PHP, you can restrict users to access some pages of your website.
 It can encrypt data.

Characteristics of PHP
Five important characteristics make PHP's practical nature possible −
 Simplicity
 Efficiency
 Security
 Flexibility
 Familiarity

Java Script
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly
for enhancing the interaction of a user with the webpage. In other words, you can
make your webpage livelier and more interactive, with the help of JavaScript.
JavaScript is also being used widely in game development and Mobile application
development.
Benefits Of JavaScript
 JavaScript is very easy to implement. All you need to do is put your code in the
HTML document and tell the browser that it is JavaScript.
 JavaScript works on web users’ computers — even when they are offline!
 JavaScript allows you to create highly responsive interfaces that improve the
user experience and provide dynamic functionality, without having to wait for
the server to react and show another page.
 JavaScript can load content into the document if and when the user needs it,
without reloading the entire page — this is commonly referred to as Ajax.
 JavaScript can test for what is possible in your browser and react accordingly —
this is called Principles of unobtrusive JavaScript or sometimes defensive
scripting.
 JavaScript can help fix browser problems or patch holes in browser support —
for example fixing CSS layout issues in certain browsers.

Some uses of JavaScript are:

(i) Client side validation of form elements instead of sending data to server every
time.
(ii)To insert new elements such as text box etc. to the website on the go.
(iii) To provide users notifications from the server.
(iv)To load data in the background from the server and loaded on to the page side
without reloading.
FLOWCHARTS(KEY BENEFITS)
1. Visual Clarity
One of the biggest benefits of a flowchart is the tool's ability to
visualize multiple progresses and their sequence into a single
document. Stakeholders throughout an organization can easily
understand the workflow while finding out which step is
unnecessary and which progress should be improved.

2. Instant Communication
Teams can use flowcharts to replace meetings. Simply
clarifying progresses offers an easy, visual method to help team
members instantly understand what they should do step by
step.

3. Effective Coordination
For project managers and resource schedulers, the benefits of a
flowchart include the ability to sequence events and reduce the
potential for overburdening team members. Eliminating the
unnecessary steps help to save time and resources.

4. Efficiency Increase
Efficiency increases are a significant benefit of flowcharts. The
flowchart lists each step necessary to perform a process. The
flowchart helps a designer remove unnecessary steps in a
process, as well as errors. The flowchart should only include
the steps that are requirements to reach the endpoint of the
process.
5. Effective Analysis
With the help of flowchart, problem can be analyzed in more
effective way. It specifically shows what type of action each
step in a process requires. Generally, a rectangle with rounded
edges defines the beginning or end of the process, a diamond
shape shows the point at which a decision is required, and a
square block shows an action taken during the process. A
flowchart may also include symbols that show the type of
media in which data is stored, such as a rectangle with a
curved bottom to show a paper document or a cylinder to
symbolize a computer hard drive.

6. Problem Solving
Flowcharts break a problem up into easily definable parts. The
defined process displayed by the flowchart demonstrates the
method of solving a complex problem. A flowchart reduces the
chance that a necessary step for solving a problem will be left
out because it appears obvious. In this way, it reduces cost and
wastage of time.

7. Proper Documentation
Digital flowcharts serve as a good paperless documentation,
which is needed for various purposes, making things more
efficient.
System Design
When the requirements document for the software to be developed is available the
design activity begins. The main aim of design process is to produce a model or
representation of the system, which can be used later to bind the system. The produced
model is called design of the system. A system design is a top down approach to
minimize complexity and make a problem manageable by subdivided it into smaller
segments.
The most changing phase of the system development of life cycle is system design. It
refers to the technical specification that will be applied in implementing the candidate
system. The design phase is a translation from user oriented document to document
oriented to programmers. The potential objects are thoroughly analyzed. Class
hierarchies are to check whether the system is behaving the way it has to. There after
the classes are individually tested and subsequently they are integrated from the
overall system. This level focuses on deciding which modules are needed for system
the specifications for those modules and how these modules are that interconnected
CONTEXT DIAGRAM:-
A Context Flow Diagram is a top level (also known as level 0) data flow diagram. It
only contains one process node (process 0) that generalizes the function of the entire
system in relationship to external entities. A Context Flow Diagram is a diagram that
shows the inputs and output of a system. It shows all the external entities with the
system and the data flows between these entities and the system.
DATA FLOW DIAGRAM:-
A Data Flow Diagram (DFD) is a graphical representation of the
"flow" of data through an Information System. A data flow
diagram can also be used for the visualization of Data Processing.
A DFD represents flow of data through a system. Data flow
diagrams are commonly used during problem analysis. It views a
system as a function that transforms the input into desired output.
A DFD shows movement of data through the different
transformations or processes in the system.
Dataflow diagrams can be used to provide the end user with a
physical idea of where the data they input ultimately has an effect
upon the structure of the whole system from order to dispatch to
restock how any system is developed can be determined through a
dataflow diagram. The appropriate register saved in database and
maintained by appropriate authorities.
FLOWCHART OF APPLICATION MODULE
 FLOWCHART OF SEARCH

START

HOME PAGE

SEARCH BOX
NO YES
ENTER LECTURES
TO BE SEARCHED

SHOW LECTURES WITH

NOT FOUND
THE KEYWORDS PRESENT

END/STOP
SCREENSHOT(HOME PAGE)

This page shows the list of departments and a direct

search option to search for a given course or lecture. The
click on any department redirects us to the course page
while the search results are displayed in a separate
search page.
SCREENSHOT

This page shows the subjects of a department when

we click on the required department button on the
toolbar.
Each department has its subject playlists button
along with the name and subject logo. The name of
department selected is highlighted in the
navigation/tool bar.
SCREENSHOT

This page appears when you click on the playlist button

of different subject of a particular department.
Here all the lectures on different topics appear along
with their name and Video icon which acts as button and
on clicking redirects to the video lecture
SCREENSHOT

The Search bar is used for finding lectures in the module. When you
enter the topic or keyword in the box and click on the press button it
navigates to the desired place. It also filters topics for autofill when the
user enters a desired topic.
In the screenshot below is the page which is redirected on using the
search box.
 <?php

<?php
 function search_item($search)
{
$lower_search = strtolower($search);
$cse = array('daa','design & analysis of algorithms','design
and analysis of algorithms','theory of computation','flat','c
programming','c','artificial intelligence','ai','coa','computer
organisation and architecture','computer networks','computer
network','natural language processing','nlp','real time systems','real
time system','rts' );

$me = array('fluid mechanics','fluid mechanic','strength of

materials','strength of material','design of machine elements','design of
machine element','heat and mass transfer','ic engines and gas
turbines','ic engine and gas turbine','ic','gas turbine','mechanics Of
solid','mos','kinematics of machine','engineering mechanics','engineering
mechanic','engineering drawing');

$ee = array('microwave integrated circuits','microwave

integrated circuit','digital system design','non linear dynamical
system','power system dynamics and control','power system','non
linear','discrete time signal processing','discrete time','discrete time
signal','estimation of signals and systems','estimation of
signal','estimation of signals');

$ece = array('advance logic systhesis','advance

logic','digital switching','digital system design','advance optical
communication','advance optical','digital system','digital vlsi system
design','vlsi','rf integrated circuits','rf','broadband
networks','broadband','wireless communication','wireless');

$ce = array('geotechnical earthquake engineering','geotechical

earthquake','geotechical','earthquake','ground water hydrology','ground
water','watershed management','watershed','siesmic analysis of
structures','siesmic analysis','numerical method in ce','numerical
method','concrete technology','concrete','soil dynamics','soil','modern
construction materials','modern
construction','construction','surveying');

if(in_array($lower_search, $cse))
{
header('Location:cse.php');
 }

else if (in_array($lower_search, $me))

{
header('Location:me.php');
}

else if (in_array($lower_search, $ee))

{
header('Location:ee.php');
}

else if (in_array($lower_search, $ece))

{
header('Location:ec.php');
}

else if (in_array($lower_search, $ce))

{
header('Location:ce.php');
}
else
{
header('Location:notfound.php');
}
}

$submit = $_POST['submit'];

if(isset($submit))
{
$search = $_POST['search'];
 search_item($search);
}

?>

Subject Page Source Code

<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="images/drdologo.png">
<title>Online Course</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="drop.css"/>
<link rel="stylesheet" type="text/css" href="jqueryui/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="jqueryui/jquery-
ui.structure.css">
<link rel="stylesheet" type="text/css" href="jqueryui/jquery-
ui.theme.css">

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-red"
style="background-color: #A5E89B;">
<a class="navbar-brand" href="index.php"><b>ITR</b></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
&nbsp;&nbsp;&nbsp;

<div class="collapse navbar-collapse" id="navbarSupportedContent">

 <ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="index.php"><b>Home</b> <span class="sr-
only">(current)</span></a>
</li>
&nbsp;&nbsp;&nbsp;&nbsp;
<li class="nav-item active">
<a class="nav-link" href="cse.php"><b>CSE</b></a>
</li>
&nbsp;&nbsp;&nbsp;&nbsp;
<li class="nav-item">
<a class="nav-link" href="me.php"><b>ME</b></a>
</li>
&nbsp;&nbsp;&nbsp;&nbsp;
<li class="nav-item">
<a class="nav-link" href="ee.php"><b>EE</b></a>
</li>
&nbsp;&nbsp;&nbsp;&nbsp;
<li class="nav-item">
<a class="nav-link" href="ec.php"><b>ECE</b></a>
</li>
&nbsp;&nbsp;&nbsp;&nbsp;
<li class="nav-item">
<a class="nav-link" href="ce.php"><b>CE</b></a>
</li>
&nbsp;&nbsp;&nbsp;&nbsp;

</ul>
<form class="form-inline my-2 my-lg-0" action="search.php"
method="POST">
<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search" name="search" id="searchbox">
<input class="btn btn-success my-2 my-sm-0" type="submit"
name="submit" value="search"></input>
 </form>
</div>
</nav>

<table class="table table-hover table-dark " style="text-align: center;">

<thead>
<tr>
<th scope="col" colspan="3"><p style="font-size: 30px;text-
align: center"><u>DAA Lectures</u></p></th>
</tr>

<tr>
<th scope="col" width="50px">SNo.</th>
<th scope="col"><b>Videos</b></th>
<th scope="col" width="65%"><b>Lecture On</b> </th>

</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><video height="250px" width="250px" src="videos/1.mp4"
controls></video></td>
<td style="padding-top: 100px;"><h5>1.1 Introduction to
Algorithms</h5></td>

</tr>
<tr>
<th scope="row">2</th>
<td><video height="250px" width="250px" src="videos/1.mp4"
controls></video></td>
<td style="padding-top: 100px;"><h5>1.2 Priori Analysis and
Posteriori Testing</h5></td>
 </tr>
<tr>
<th scope="row">3</th>
<td><video height="250px" width="250px" src="videos/1.mp4"
controls></video></td>
<td style="padding-top: 100px;"><h5>1.3 Characteristics of
Algorithms</h5></td>

</tr>

<tr>
<th scope="row">4</th>
<td><video height="250px" width="250px" src="videos/1.mp4"
controls></video></td>
<td style="padding-top: 100px;"><h5>1.4 Characteristics of
Algorithms</h5></td>

</tr>
<tr>
<th scope="row">5</th>
<td><video height="250px" width="250px" src="videos/1.mp4"
controls></video></td>
<td style="padding-top: 100px;"><h5>1.5 Types of
Algorithm</h5></td>

</tr>
<tr>
<th scope="row">6</th>
<td><video height="250px" width="250px" src="videos/1.mp4"
controls></video></td>
<td style="padding-top: 100px;"><h5>1.6 Analysis of
Algorithms</h5></td>

</tr>
 <tr>
<th scope="row">7</th>
<td><video height="250px" width="250px" src="videos/1.mp4"
controls></video></td>
<td style="padding-top: 100px;"><h5>1.7 Frequency Count
Method</h5></td>

</tr>
<tr>
<th scope="row">8</th>
<td><video height="250px" width="250px" src="videos/1.mp4"
controls></video></td>
<td style="padding-top: 100px;"><h5>1.8 Time Complexity</h5></td>

</tr>
</tbody>
</table>

</body>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/jquery.min.js"></script>
<script src="jqueryui/jquery-ui.js"></script>

<script src="js/search.js"/>

</html>

Source Code of BootStrap Sample file

/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT
(https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT
(https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav,

section {
display: block;
}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
 background-color: #fff;
}

[tabindex="-1"]:focus {
outline: 0 !important;
}

hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}

h1, h2, h3, h4, h5, h6 {

margin-top: 0;
margin-bottom: 0.5rem;
}

p {
margin-top: 0;
margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}

ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}

dt {
font-weight: 700;
}

dd {
margin-bottom: .5rem;
margin-left: 0;
}

blockquote {
margin: 0 0 1rem;
}
b,
strong {
font-weight: bolder;
}

small {
font-size: 80%;
}

sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}

sub {
bottom: -.25em;
}

sup {
top: -.5em;
}

a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}

a:hover {
 color: #0056b3;
text-decoration: underline;
}

a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus
{
color: inherit;
text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
outline: 0;
}

pre,
code,
kbd,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation
Mono", "Courier New", monospace;
font-size: 1em;
}

pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
}
figure {
margin: 0 0 1rem;
}

img {
vertical-align: middle;
border-style: none;
}

svg {
overflow: hidden;
vertical-align: middle;
}

table {
border-collapse: collapse;
}

caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}

th {
text-align: inherit;
}

label {
display: inline-block;
 margin-bottom: 0.5rem;
}

button {
border-radius: 0;
}

button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}

button,
input {
overflow: visible;
}

button,
select {
text-transform: none;
}
select {
word-wrap: normal;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}

textarea {
overflow: auto;
resize: vertical;
}

fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}

legend {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal;
}

progress {
vertical-align: baseline;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}

[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}

output {
display: inline-block;
}

summary {
display: list-item;
cursor: pointer;
}

template {
display: none;
}
[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

BIBLIOGRAPHY
 W3 SCHOOLS
 STACK OVERFLOW
 GEEKS FOR GEEKS
 WIKIPEDIA