IndustrialTraining Report - Format - Doc-1

AN
INDUSTRIAL TRAINING REPORT

ON
WEB DEVELOPMENT
Submitted in Partial fulfillment for the award of the Degree of
Bachelor of Technology
in
ELECTRONICS & COMMUNICATION ENGINEERING
To
RAJIV GANDHI PROUDYOGIKI VISHWAVIDYALAYA

BHOPAL (M.P)
Under The Guidance of

Avinash Chouhan
Designation
Beta Blue Foundation, Hyderabad
Submitted By
ANJALI SINGH
0105EC181021
Department of Electronics & Communication Engineering

Oriental Institute of Science and Technology, Bhopal
Session: 2018-2019
ORIENTAL INSTITUTE OF SCIENCE AND TECHNOLOGY, BHOPAL
CANDIDATE'S DECLARATION
I “ANJALI SINGH” hereby declare that I have undertaken 2 weeks Industrial
Training at “BETA BLUE FOUNDATION” during a period from 2/08/21 to
17/08/21 in partial fulfillment of requirements for the award of degree of B.Tech
(ELECTRONICS & COMMUNICATION ENGINEERING) at ORIENTAL
INSTITUTE OF SCIENCE AND TECHNOLOGY, BHOPAL. The work which
is being presented in the training report submitted to Department of
ELECTRONICS & COMMUNICATION ENGINEERING at ORIENTAL
INSTITUTE OF SCIENCE AND TECHNOLOGY, BHOPAL is an authentic
record of training work.
Signature of the Student with Seal
0105EC181021
Signature of Faculty Coordinator Signature of H.O.D.
Prof. M.Hasnine Mirza Dr Manish Sawale

ABSTRACT
The aim of this Bachelor’s thesis was to

develop a WordPress mobile-first style. Website
for the customer. The main purpose of the
development was to learn website designing
principles and creating a responsive website for
the mobile and desktop platforms. The
development process began defining the
requirements of the website and creating the
requirements document. Then the next step was
learning how to design awebsite layout and to
choose the colour scheme for the site. The
website was constructed by NetBeans IDE 8.2 RC,
Bootstrap and Wampserver. The result of the
website was as desired. The website scaled all the
different platforms, and all the required
requirements were fulfilled.
i
ACKNOWLEDGEMENT
I take this opportunity to express my sincere gratitude to all those who have
been helpful in the successful completion of my Industrial Training. I would
like to show my greatest appreciation to the highly esteemed and devoted
technical staff, supervisors of the Beta Blue Foundation, Hyderabad. I am
highly indebted to them for their tremendous support and help during the
completion my training.
My special goes to Suresh Uplavdiya, Manager, Beta Blue Foundation

for acceptance my request for providing Industrial Training and giving me
an opportunity to be a trainee of Beta Blue Foundation, Hyderabad. I
would like to thank to all those people who directly or indirectly helped and
guided me to complete my training, including the following instructors and
technical officers of various sections.
Nevertheless, I would like to place on record my deep sense of gratitude to

Dr. K G Sudhakar, Director, Oriental Institute of Science and Technology,
Bhopal, who granted me the permission of Industrial training. I also wish to
extend my thanks to Head of Department, Dr. Manish Sawale for his kind
co-operation.
Last but not least, I would like to express my special gratitude towards my
parents and friends for their constant encouragement.
Student Name – ANJALI SINGH
ii
TABLE OF CONTENTS
Title Page No.
Abstract ……… ……………………………….…………….…i

Acknowledgement …………………………………….…….…ii
Table of Contents……………………………………..……..…iii
Chapter 1: Introduction 1
1.1 Introduction of the Training Organization 1
1.2 Administrative System the Organization 2
1.3 Business Functions of the Organization 2
1.4 Services Provided by the Organization 3
1.5 Benefits from the Training 4
Chapter 2: Web Development 5
2.1Objectives 5
2.2 Analysis 6
2.3 Techniques 20
Chapter 3: Methodology 21
3.1Introduction 21
3.2 Software and Tools Used 37
Chapter 4: Result and Analysis 38
4.1 Results 38
4.2 Scope 42
4.3 Future Work 43
Chapter 5: Conclusion 45
Bibliography………………………………………………….…iv
iii
CHAPTER 1
INTRODUCTION
1.1 Introduction of the Training Organization
As the world transitions to a new normal, BETA BLUE FOUNDATION is
empowering a more resilient future for customers and communities. From
building more adaptive "businessanywhere" frameworks to advanced
technologies that fuel the intelligent enterprise BETA BLUE
FOUNDATION helps businesses thrive in a world defined by disruption and
fueled by transformative technology.
Beta Blue Foundation is a software company based in Hyderabad providing

multitude of services to startups in the field of software , digital marketing,
AI, cyber security etc. Our organization also provides training and certificate
courses to students with the motive of providing them a platform to learn
and take advantage of online use of education.
It gives max growth to other business by delivering them with best software
products based on business ideas and requirements given by the companies.
Some of the courses which we provide is digital marketing, cyber security,
database management, android application.
1. We serve high quality growth services such a Software Department,
Digital Marketing, Cyber Security, Database Setup, Android Development,
AI Software etc.
2. Use our services and our expertise to convert your Business Idea into
Software to Maximize the growth of your Business.
3. Our team delivers the best Software Product based on Your Business
Requirement.
4. We'll prepared pricing plans for all budgets so you can maintain your
Software for Better User Experience at your convenience.
5. Contact us to develop your company Software and reach new heights.
6. After Your Confirmation, Development is Started based on Your
Requirement
1.2 Administrative System the Organization
The existing system works by manually supplying information regarding an
advertisement to be placed in the media (Newspapers, magazines, etc) which
must be checked thoroughly before giving for final point. The existing
system has got lots of intricacies within it and need lot of human effort and
paper work. All above data need to maintained properly and maintaining this
is a tedious and risky process as small printing error may completely change
the sense of the advertisement.
1.3 Business Functions of the Organization
Beta Blue foundation offers training to students, corporates, institutions and
security agencies. They provide services and education. In education they
conduct seminars and they provide so many online courses and takes classes.
In services they provide internship and training.

1.4Services Provided by the Organization
We serve high quality growth services which are presented below.
 SOFTWARE DEVELOPMENT
 DIGITAL MARKETING
 CYBER SECURITY
 DATA BASE SET-UP
 Block Chain SET-UP
 POS/CRM SOFTWARE
 ANDROID APPLICATION
 AI SOFTWARE
Our Training & Certification Courses
 Web Development (Basic)

 ANDROID DEVELOPMENT
 PYTHON PROGRAMMING(BASIC+ADVANCE)
 JAVA PROGRAMMING (CORE +ADVANCE)
 CYBER SECURITY
 MACHINE LEARNING
 Cloud Computing (AWS)
1.5 Benefits from the Training
Web development is a creative method and skill to create functionality in
the web pages by using programming languages. Programming languages
are used to create applications, websites, services, products that run
through the internet.
There are many things in the web development process and mostly it
depends on the lifecycle of the application or website. The main work is to
create the functionality, process in the website and automation of various
solutions.
The service of a business can easily explain what our business is on the internet
through a website. When you take services like marketing into your business,
you will see a few improvements in your business. The best way you can
easily get the customers you need online is to market yourself digitally but you
will carry the digital market through the parade for your business.
Improve your critical thinking abilities - Web developers should also be problem
solvers. There could be instances when you encounter a hacking incident. To solve
this predicament, you need to be a critical thinker to find the best solutions.
Enhance your creativity - Although the web designers create the design for
the website, you also need to be creative to collaborate with them.
Sometimes, they may ask your opinion about how to improve the website.
Besides, it is easier to create a website if you are also familiar with the design.
Make web designs turn into websites - Help web designers and
businesses make their web designs real. With your knowledge in
programming, you can use the ideal language to make the website functional.
The world needs a person with extraordinary programming skills to help
businesses thrive in this mod
CHAPTER 2
WEB DEVELOPMENT
2.1 Objectives
Web development is the work involved in developing a Web site
for the Internet (World Wide Web) or an intranet (a private
network). Web development can range from developing a simple
single static page of plain text to complex Web-based Internet
applications (Web apps), electronic businesses, and social
network services. A more comprehensive list of tasks to which
Web development commonly refers, may include Web
engineering, Web design, Web content development, client
liaison, client-side/server-side scripting, Web server and network
security configuration, and e-commerce development.
Among Web professionals, "Web development" usually refers to
the main non-design aspects of building Web sites: writing
markup and coding. Web development may use content
management systems (CMS) to make content changes easier and
available with basic technical skills.
For larger organizations and businesses, Web development teams
can consist of hundreds of people (Web developers) and follow
standard methods like Agile methodologies while developing
Web sites. Smaller organizations may only require a single
permanent or contracting developer, or secondary assignment to
related job positions such as a graphic designer or information
systems technician. Web development may be a collaborative
effort between departments rather than the domain of a
designated department. There are three kinds of Web developer
specialization: front-end developer, back-end developer, and full-
stack developer. Front-end developers are responsible for
behavior and visuals that run in the user browser, while back-end
developers deal with the servers.
2.2 Analysis
HTML ( FRONT END DEVELOPMENT)
HTML INTRODUCTION
HTML stands for 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. HTML is used to design the structure
of a web page. It is a set of instructions on how to display content on a web
page. 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 documents
are written in html editors. Since the html document is written in plain , we
can use any text editor. Ex : notepad, notepad++, sublime text, eclipse,
netbeans etc.
HTML PAGE STRUCTURE

<!DOCTYPE html>
<!-
Add your comments here
-->
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
TAGS AND ELEMENTS

HTML TAGS :
HTML tags are the hidden keyword within a web page that define how the
browser must format and display the contents. Most of these tags have 2
parts , opening tag and closing tag.
<p>: Opening Tag </p>: Closing Tag
Opening Tag and Closing Tag together are called as a Container .

<html>
Tags are used to inform the browser how to format or display the text,
except for the declaration of document type and comment. Comments can be
included with html tags also.
<body>
It contains all the visible contents of the page. It may include texts, links and
tables, or videos.
<div>
It is used to create different sections in a web page.
TEXT FORMATTING
There are six different heading tags.
<h1> I am Heading </h1>
<h2>I am Heading</h2>
Number defines the size of the text.
<i> : Tag to make text look italic.
<strong> : Tag to make text look bold.
<em>: Tag to make text look italic.
These tags help the browser know about the special importance of
text , not just styling. It also helps in SEO purposes .
<u> : Tag element is used to underline text.
<mark> : Tag element is used to highlight text.
HYPERLINKS
Any content , image or text can be linked to a new page. The text
linked is called anchor text. Link is created using html <a>click
here</a>link. href=”hypertext reference” <a href = “ “
>click here</a> target=”_blank”
<a href=”link” target=”_blank”>

This will open in another tab. target=”_self”
<a href=”link” target=”_self” >
This will open in the same tab
CASCADING STYLE SHEETS (CSS)

Cascading Style Sheets is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML.
CSS is a cornerstone technology of the World Wide Web, alongside HTML
and JavaScript.
There are three ways of Styling :
1)Inline 2) Internal 3) External
BOX MODEL
❖ Each and every element can be considered as a box.
❖ Innermost box called content contains content which could be image ,
text.
❖ Padding clears the area around the content. It is always transparent .
❖ Padding is surrounded by a border whose colour can be chosen.
❖ Margin clears the area outside the border. Default margin is 0.Margin is
also transparently applied.
FONTS
Properties :
1) Font Style 2) Font Variant 3) Font weight 4) Font Size 5) Line height 6)
Font family Font size and Font family are mandatory.
2) For Ex : h4 { font: italic small-caps bolder 28px arial, sans-serif ; }
Comma is used in font family if there is unavailability of any font.
NAVIGATION BAR
Navigation Bar and logo are together often referred to as a header.

Navigation bar links different sections within a page.
Navigation links are added using the <nav> tag. Using the <ul> tag
inside the
<nav> tag we can create a navigation bar.
To create logo in navigation bar ;
<div id=”header”>
<a href=”#” class=”logo”>
<img src=”./img/logo.jpg” alt=”msd”
</a>
FORMS
It collects information stored in databases or sent to the server. Using

the <form> element to create form.
<form>
<input type=”text” placeholder =”Enter first Name”
name=”First name”><br><br> <input type=”submit”>
BOOTSTRAP
BOOTSTRAP INTRODUCTION ( FRONT END
DEVELOPMENT)
Bootstrap is a free and open-source CSS framework directed at responsive,
mobile first front-end web development. It contains CSS and JavaScript-
based design templates for typography, forms, buttons, navigation, and other
components.
Bootstrap is one of the simplest to implement and use in the market. Its
implementation is as simple as importing a CSS and using the classes
available. Bootstrap’s responsiveness makes it all much simpler. It can
intelligently sense the device’s resolution and screen width and adjust the
content accordingly. Bootstrap is supported by the huge open source
community present on GitHub.
Linking Javascript File(Jquery) : Javascript is used to make the page more
dynamic, to add effects , animation etc. Javascript files in the JS folder of
bootstrap are used to add predefined javascript functions in the html code.
Script element in html is used to embed script within an html document.
<script type=”text/javascript src=”bootstrap/js/bootstrap.min.js”></script>
★ Second method to link Bootstrap file :
“https://max.edn.bootstrapedn.com/bootstrap/3.3.7/css/bootstrap.min.js”>
“ https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery/1.12.4/
jquery.min.js”>
“ https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”
BREAKPOINTS
MULTIPLE CLASSES :
It is one of the best ways of defining complex web pages layout and design.
At times we have to make minor changes in an element while keeping
everything else just the same. This can be achieved using multiple classes on
the element we plan to make changes to. Use of multiple classes on an
element is a core part of designing web pages using BOOTSTRAP ,
Bootstrap has a number of predefined classes.
BREAKPOINTS IN BOOTSTRAP :
DEVICES BREAKPOINT
Large Devices >=1200px
Medium Devices 992px to 1199px
Small Devices 768px to 991px
Extra Small Devices <768px
JUMBOTRON AND GLYPHICONS

Jumbotron is a big box for calling extra attention to some special attention
content or information. Class Jumbotron is used to create jumbotrons. It is
represented in grey box and round colors. It also enlarges the text inside it.
Jumbotron takes the full width of the element.
<body>
<div class =”container”>
<h1>This is a jumbotron</h1>
<div class=”jumbotron”
We can also insert tables, content, text etc inside a
jumbotron.
GLYPHICONS : It is the icon displayed on any web
page.
<body>
<div class=”container”>
<h3>search</h3>
<h3 search <span class=”glyphicon
glyphicon_search”></span></h3>
THUMBNAILS
Thumbnails are reduced versions of audio and videos.

Thumbnails take the available width.
<h1>Thumbnails<h1>
<div class=”col-sm-4”>
<a href=”#”><img src=”img path” alt=”Responsive image”></a>
Adding <a> tag to make thumbnails clickable.
Thumbnails are treated as links using anchor tags.
. thumbnail { padding:4px; border:1px solid #ddd;
border-radius:4px; }
To add content in thumbnail ;
<div class=”content”>
<h3> </h3>
<p> </p>
</div>
FORMS
FORM STYLING :
<div class=”row”
<div class=”col-xs-4”>
<h1>Styling forms</h1>
By default form-control class can take the entire width for the
element.
<form>
<div class=”form-group”>
<input type=”text” class=”form-control” name=”first_name
placeholder=”first_name”>
</div>
.form-group { margin-bottom:5px;
}
To stop users from entering data add disabled attributes.
To make the first name and last name appear above the input field use
<label> tag.
<div class=”form-group”>
<label=”first-name”>First Name</label>
<input type=”text” class=”form-control” name=”first_name”>
STYLING CHECKBOXES AND RADIO BUTTONS :
<div class=”checkbox”>
I want to order :
<label>
<input type=”checkbox” name=”food” value=”coffee” checked>Coffee
STRUCTURED QUERY LANGUAGE((SQL)

SQL INTRODUCTION ( BACK END DEVELOPMENT)
SQL is a domain-specific language used in programming and designed for managing
data held in a relational database management system, or for stream processing in a
relational data stream management system. A database server is a computer program
that provides database services to other programs or computers, as defined by the
client-server model.
INTRODUCTION TO DBMS
A system application for creating and managing your databases , access and can
modify your Data . DBMS works in an efficient and secured manner.
DBMS Types :
1) Flat file database
2) Relational database : a)hierarchical database
b)RDBMS
3) No SQL : a)Key value b)column oriented c)document oriented d)Graph DB
CREATING DATABASE
In technical terms; database is a set of multiple tables. Tables may be connected to

each other by the concept of foreign keys.
INTRODUCTION TO SQL
Structured Query Language : 1) It is used to communicate with the database. 2) My

SQL is an open source dbms. 3) My SQLi is an advanced version of My SQL.
MYSQL DATABASES
DATA DEFINITION LANGUAGE(DDL)
1) Commands in SQL
Create command is used to create databases and tables.
For ex : CREATE database temp_db;
$ always write database names in your query
Data contains actual values corresponding to each column of the table.
PRIMARY KEY:
Primary key is a number uniquely associated with each row or record.
For ex: CREATE TABLE temp_db_products(id INT NOT NULL ,
name VARCHAR(30), category
INT(30), PRIMARY KEY(id));
ALTER AND DROP

We can alter the structure of the existing table.
Four keywords used with alter command are :
1)add 2)drop 3)change 4)modify
Ex: To add a column to an existing table.
ALTER table database-name.table-name ADD column-new data-type
(length constraints)
To add a column from an existing table.
ALTER table database-name.table-name DROP column-name.
DROP COMMAND :
Syntax :
DROP database-name.table-name
DROP database temp_db;
FOREIGN KEY AND TRUNCATE

Mapping between two tables is done using foreign key.
A foreign key is a key used to link two tables together. This is sometimes
also called a referencing key .
A Foreign Key is a column or a combination of columns whose values
match a Primary Key in a different table.
To view relation views add storage to innodb operations.

Relation views provide functionality to link columns of one table to columns
of another table.
TRUNCATE :
Truncate command deletes all the records inside the table.
Used when we only want to keep the structure of the table and delete the
data. PhpMyadmin allows users to execute truncate commands without
using the SQL command.
Data Definition Language(DDL)

1) Primary key
2) Alter command
3) Drop command
4) Foreign key
5) Truncate
DATA MANIPULATION LANGUAGE(DML)
A collection of those commands that help to INSERT, DELETE, MODIFY
or pull out data from the database.
INSERT :
This command is used to insert data into the tables.
For ex : INSERT INTO database-name (name, category) values(‘ ‘,’ ‘)
UPDATE :
This command is used to update the existing data in tables.
For ex : UPDATE database-name SET first_name =’ ‘ WHERE users.id= 1 ;
DELETE :
This command is used to delete an entire row from a table.
To delete a row ; make sure it does not have a primary key or foreign key
For ex : DELETE FROM users WHERE id=’ ‘ ;
SELECT :
Select command is used to pull out the existing data from tables.
SELECT * FROM ‘ ‘ Use * to Display all the columns.
PHP (HYPERTEXT PREPROCESSOR)
PHP INTRODUCTION ( BACK END DEVELOPMENT )

PHP is a server side scripting language which is used to perform operations on
databases. In building dynamic pages and websites functionality. PHP code is
usually processed on a web server by a PHP interpreter implemented as a
module, a daemon or as a Common Gateway Interface (CGI) executable. On a
web server, the result of the interpreted and executed PHP code which may be
any type of data, such as generated HTML or binary image data – would form
the whole or part of a HTTP response.
BASICS
PHP STRUCTURE :
<!DOCTYPE html>
<html>
<head>
<title><?php echo” “?> </title>
</head>
<body>
<?php
Echo” “?>
</body>
</html>
VARIABLES , DATA TYPES AND OPERATORS

To write variable name in php
$variable_name
<body>
<?php
$var1=18;
$var2=12;
Echo gettype($var1);
?>
</body>
To perform addition :
<?php
$var1=18;
$var2=12;
$sum= $var1 + $var2 ;
Echo $sum;
?>
CONCATENATION :
Concatenation is an addition of combining two strings to make it one string.
<?php
$var1=”Hello”;
$var2=”Internshala”;
Echo $var1.$var2;
?>
FUNCTIONS , ARRAYS AND STRINGS

FUNCTIONS:
A function is an independent code that performs a particular task
<?php
Function sum ($parameter1 , $parameter2) { $addition =
$parameter1 + $parameter2;
return addition ;
?>
<body>
$var=1;
$var=2;
$sum=sum($var1, $var2);
Echo “ Sum of two variables is “. $sum.” “;
?>
If passed with function call, it will have that value and if not passed , it
will have that value and if not passed it will use the default value
ARRAYS:
An array is a special variable, which can hold more than one value at a time.
Stores integers, strings and other arrays etc.
<body>
<?php
$numbers = array(18,12)
$sum= $numbers[0] + $numbers[1]; echo”Sum of two

variables is “.sum. “ “;
Echo “Length of the array is “. sizeof ($numbers)”;
Array can be 1D, 2D and 3D.

STRINGS :
A string is a set of characters that can contain spaces and numbers.
<?php
$variable1=18;
echo”The value of variable1 is “$variable1”
To calculate string length ;
<?php
$string1= “ “;
$length_of_string . strlen($string1);
Echo $length_of_string
Double quotes inside single quotes will be considered as strings.
Single quotes inside Quotes will be considered as strings.
LOOPS
A loop consists of two parts, a body of a loop and a control statement.
The control statement is a combination of some conditions that direct the

body of the loop to execute until the specified condition becomes false.
The purpose of the loop is to repeat the same code a number of times.
THREE TYPES OF LOOPS:
1)FOR LOOP
2)WHILE LOOP
3)DO WHILE LOOP

2.3 Techniques
Cache pages for offline usage

HTML5 introduces a great feature, offline caching. Basically, this feature allows
you to tell the client browser to cache some pages so your visitor will be able to
view it again, even if he’s not connected to the Internet.
Server-side JavaScript
Since the mid-90′s, JavaScript has been a very popular client-side language for
web developers. But nowadays, JavaScript is becoming more and more used on
the server side. Why? Because now we have powerful server-side JavaScript
environments such as Jaxer, Node.js and Narwhal.
HTML5 drag & drop

Thanks to new technologies such as HTML5, the web is becoming more and more
user-friendly. Now, it is possible to easily implement drag and drop on your web
pages. This is very useful, for example for a shopping basket.
Forms, the HTML5 way

The HTML5 specification introduces lots of new features regarding one of the
most important element of a website: forms. For example, it is now possible to
add date pickers, numeric spinners, as well as validating emails using regular
expressions patterns.
CSS animations
Most modern browsers are now supporting CSS animations. Yes, CSS are now
allowing you to create sonme simple animations, without the help of a client-side
programming language such as JavaScript.
CSS3 media queries

With the rise of mobile devices, and on the other hand, of very wide displays,
creating a website that looks great in both big and small devices is definitely a
challenge for web designers and developers. Happily, the CSS3 specification have
a new feature which allow web developers to define styles for a specific display
size only.
Font resizing with REMs

CSS3 introduces a few new units, including the rem unit, which stands for “root
em”. If this hasn’t put you to sleep yet, then let’s look at how rem works.
The em unit is relative to the font-size of the parent, which causes the
compounding issue. The rem unit is relative to the root—or the html—element.
Chapter 3
Methodology
3.1 Introduction
The code is an Home Page of an Lifestyle Store created for the

shopping of watches, shirts and cameras. In this as a web developer
created a website of Lifestyle store in which a user can sign up in the
website and can order items by adding them to the cart and placing
orders anytime. The web page is made very user friendly so that it can
be easily operated by the user .The home page is very simple and
convenient to use. The user can even signout from the website if
required. If the user forgets the password he/she can even change the
password.
PROJECT CODE
1) INDEX.php :
<?php
require("includes/common.php");
if (isset($_SESSION['email'])) {
header('location: products.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home | E-Store.com</title>
<link rel="shortcut icon" href="img\srtcticon.png" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1">

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

<link href="./css/style.css" rel="stylesheet">

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

<script src="js/bootstrap.min.js"></script>
</head>
<body style="padding-top: 50px;">

<?php
include 'includes/header.php';
?>

<div id="content">

<div id = "banner_image">
<div class="container">
<center>
<div id="banner_content">
<h1>LifeStyle Store</h1>
<h4><p>Flat ₹2,000  OFF  on all
products.</p></h4>
<br>
<br>
<a href="products.php" class="btn btn-danger btn-lg active">Shop
Now</a>
</div>
</center>
</div>
</div>
<br>
<br>


<div class="container text-center">
<div id="item_list">
<div class="panel panel-default">
<div class="panel-heading color">
<h3style="color:orange">Choose  From  wide&n
bsp;&nbsp
;ranges  of  brands</h3>
</div>
<div class="panel-body">
<div class="col-sm-3">
<a href="products.php">
<div class="thumbnail">
<img src="./img/watch.png" alt="watch" >
<div class="caption">
<h3>watch</h3>
</div>
</div>
</a>
</div>
<img src="./img/camera.png" alt="camera" >
<h3>Camera</h3>
</div>
</div>
</a>
</div>
<img src="./img/Shirts.png" alt="Shirts" >
<h3>Shirts</h3>
</div>
</div>
</a>
</div>
<img src="./Canon.png" alt="Canon" >
<h3>Canon</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>

</div>

<?php
include 'includes/footer.php';
?>

</body>
</html>
2) SIGNUP.php :
<?php
if(isset($_SESSION['email'])) {
} ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sign Up | E-Store.com</title>
<link rel="shortcut icon" href="./img/srtcticon.png" type="image/png">

<link href="css/style.css" rel="stylesheet">

</head>
<body>
<?php include "includes/header.php"; ?
<div class="row">
<img src="./img/signuppage.jpg">
</div>
<h2 style="color:orange">SIGN UP</h2>
<form action="signup_script.php" method="POST">
<div class="form-group col-sm-10">
<inputclass="form-control" placeholder="Name" name="name"
pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" required>
</div>
<input type="email" class="form-control" placeholder="Email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" name="email"
required>
<?php
if(isset($_GET["m1"])){
echo $_GET['m1'];
}
?>
</div>
<input type="password" class="form-control" placeholder="Password"
pattern=".{6,}" name="password" required>
</div>
<input type="text" class="form-control" placeholder="Contact"
maxlength="10" size="10" name="contact" required>
<?php
if(isset($_GET["m2"])){
echo $_GET['m2'];
}
?>
</div>
<input type="text" class="form-control" placeholder="City" name="city"
>
</div>
<input type="text" class="form-control" placeholder="Address
name="address" >
</div>
<button type="submit" name="submit" class="btn
btn-primary">Submit</button>
</div>
Already have an account ?<a href="login.php"> Login</a>
</div>
</form>
</div>
</div>
</div>
<?php include "includes/footer.php"; ?>
</body>
</html>
3) HOME.php :
<?php require("includes/common.php");
// Redirects the user to the products page if logged in.
if (isset($_SESSION['email'])) {
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login | Life Style Store</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"> <script
src="js/jquery.js"></script>
</head>
<body>
<?php include 'includes/header.php'; ?>
<div id="content">
<div class="container-fluid decor_bg"
id="login-panel">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary" >
<div class="panel-heading">
<h4>LOGIN</h4>
</div>
<div class="panel-body">
<p class="text-warning"><i>Login to make a purchase</i><p>
<form action="login_submit.php" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email"
name="email"
required = "true">
</div>
<input type="password" class="form-control" placeholder="Password"
name="password" required = "true">
<button type="submit" name="submit" class="btn
btn-primary">Login</button><br><br>
<?php echo $_GET['error']; ?>
</form><br/>
</div>
<div class="panel-footer"><p>Don't have an account?
<a href="signup.php">Register</a></p></div>
</div>
</div>
</div>
</div>
</div>
<?php include 'includes/footer.php'; ?>
</body>
</html>
4) CONFIRM.php :
<?php
$email = $_POST['e-mail'];
$email = mysqli_real_escape_string($con, $email);
$password = $_POST['password'];
$password = mysqli_real_escape_string($con, $password);
$password = MD5($password);
// Query checks if the email and password are present in the database.
$query = "SELECT id, email FROM users WHERE email='" . $email . "'
AND password='"
. $password . "'";
$result = mysqli_query($con, $query)or die($mysqli_error($con));
$num = mysqli_num_rows($result);
// If the email and password are not present in the database, the
mysqli_num_rows returns 0, it is assigned to $num.
if ($num == 0) {
$error = $$_GET['error'];
$error = "<span class='red'>Enter Correct Email and Password
Combination</span>"; header('location: login.php?error=' .
$error);
} else {
$row = mysqli_fetch_array($result);
$_SESSION['email'] = $row['email'];
$_SESSION['user_id'] = $row['id'];
}
?>
5) SUCCESS.php :
<?php
if (!isset($_SESSION['email'])) {
header('location: index.php');
}
$user_id = $_SESSION['user_id'];
$item_ids_string = $_GET['itemsid'];
//We will change the status of the items purchased by the user to
'Confirmed'
$query = "UPDATE users_items SET status='Confirmed' WHERE
user_id=" . $user_id . " AND item_id IN (" . $item_ids_string . ")
and status='Added to cart'"; mysqli_query($con, $query) or
die($mysqli_error($con));
?>
<!DOCTYPE html>
<head>
<title>Success | Life Style Store</title>


</head>
<body>
<div class="container-fluid" id="content">
<div class="col-md-12">
<div class="jumbotron">
<h3 align="center">Your order is confirmed. Thank you for shopping with

us.</h3><hr>
<p align="center">Click <a href="products.php">here</a> to purchase any

other item.</p>
</div>
</div>
</div>
<?php include("includes/footer.php");
?>
</body>
</html>
6) SETTINGS.php :
<?php
if (!isset($_SESSION['email'])) {
header('location: index.php');
} ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Settings | E-Store.com</title>


</head>
<body>
<div class="row">
<div class="col-lg-4 col-lg-offset-4" id="settings-container">
<h4>Change Password</h4>
<form action="settings_script.php" method="POST">
<input type="password" class="form-control" name="old_password"
pattern=".{6,}" placeholder="Old Password" required>
</div>
<input type="password" class="form-control" name="new_password"
pattern=".{6,}" placeholder="New Password" required>
</div>
<input type="password" class="form-control" name="repnew_password"
pattern=".{6,}" placeholder="Re-type New Password" required>
</div>
<div><b class="red">
<?php
if(isset($_GET["error"])){
echo $_GET['error'];
} ?>
</b></div>
<br>
<button type="submit" class="btn btn-primary">Change</button>
</form>
</div>
</div>
</div>
<?php include 'includes/footer.php'; ?>
</body>
</html>
7) CART.php :
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cart | Life Style Store</title>

<link href="./css/style.css" rel="stylesheet">


</head>
<body style="padding-top: 50px;">

<?php
include 'includes/header.php';
?> 
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<table class="table table-striped">

<?php
$sum = 0;
$user_id = $_SESSION['user_id'];
$query = "SELECT items.price AS Price, items.id, items.name AS Name
FROM users_items JOIN items ON users_items.item_id =
items.id WHERE users_items.user_id='$user_id' and
status='Added to cart'";
$result = mysqli_query($con, $query)or die($mysqli_error($con));
if (mysqli_num_rows($result) >= 1) {
?>
<thead>
<tr>
<th>Item Number</th>
<th>Item Name</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysqli_fetch_array($result)) {
$sum+= $row["Price"];
$id="";
$id .= $row["id"] . ",";
echo "<tr>
<td>" . "#" . $row["id"] . "</td>
<td>" . $row["Name"] . "</td>
<td>Rs " . $row["Price"] . "</td>
<td><a href='cart-remove.php?id={$row['id']}'
class='remove_item_link'>
X </a></td></tr>"; }
$id = rtrim($id, ",");
echo "<tr>
<td></td>
<td>Total</td>
<td>Rs " . $sum . "</td>
<td><a href='success.php?itemsid=".$id ."'class='btn btn-primary'>Confirm
Order</a></td></tr>";
?>
</tbody>
<?php
} else {
echo "<center><h2>Add items to the cart first!</h2></center>";
}
?>
<?php
?>
</table>
</div>
</div>
</div>

<?php include 'includes/footer.php';?>

</body>
</html>
8) SUCCESS.php:
<! DOCTYPE html>

<html lang="en">
<head>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Success | Life Style Store</title>
</head>
<body>
<div class="col-md-12">
<div class="jumbotron">
<h3 align="center">Your order is confirmed. Thank you for shopping with
us.</h3><hr>
<p align="center">Click <a href="products.php">here</a> to purchase any other
item.</p>
</div>
</div>
</div>
<?php include("includes/footer.php");
?>
</body>
</html>
9) MODAL.php :

<div class="modal fade" id="loginmodal" role="dialog">
<div class="modal-dialog">

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span>
Login</h4>
</div>
<div class="modal-body">
<form role="form">
<label for="username"><span class="glyphicon
glyphicon-user"></span>Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter email">
</div>
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span
class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-
dismiss="modal"><span class="glyphicon glyphicon-remove"></span>
Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
10) STYLE.CSS :
body,
html {
width: 100%;
height: 100%;
} body{
padding-top:100px;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; font-
weight: 550;
} #content{
min-height: 600px;
} .rmvb{
list-style: none;
padding-left: 50px;
} .color{
text-align: center;
text-transform: uppercase;
}
.thumbnail1{overflow: auto;
padding: 10px 0 0 10px;
#banner_image {
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(../img/bg.jpg) no-repeat center center;

background-size: cover;
#banner_content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
margin-top: 12%;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.5);
max-width: 600px;
border-radius: 25px;
.modal-header, .close{
background-color:orange;
color: white !important;
text-align: center;
font-size: 50px;
.modal-footer{
background-color: #f9f9f9;
#item_list {
padding-top: 50px;
}
/*This code ensures that when we navigate to a particular section of a page, the
section does not get lost behind the header*/
display: block;
content: " ";
margin-top: -85px;
height: 85px;
visibility: hidden;
}
#login-panel .panel-footer{
font-weight:normal;
}
footer {
position: relative;
background-color: #3d3d3d;
color:white;
width: 100%;
bottom: 0;
font-weight: 300;
}
.columnf{
float: left;
width: 33.33%;
padding: 5px;
}
.row:after{
content: "";
display: table;
clear: both;
}
10#thmb{
float: left;
padding: 0 20px 0 30px;
#bdy{
padding-top: 80px;
padding-bottom: 20px;
.thumbnail1{
overflow: auto;
padding: 10px 0 0 10px;
.red{
color:red;
Software and Tool Used
1)NETBEANS :
NetBeans is an integrated development environment (IDE) for Java. NetBeans allows
applications to be developed from a set of modular software components called
modules. NetBeans runs on Windows, macOS, Linux and Solaris. In addition to Java
development, It has extensions for other languages like PHP, C, C++, HTML5, and
JavaScript. Applications based on NetBeans, including the NetBeans IDE, can be
extended by third party developers.
2) BOOTSTRAP:
Bootstrap is a free and open-source CSS framework directed at responsive, Mobile-
first front-end web development. It contains CSS- and (optionally) JavaScript-based
design templates for typography, forms, buttons, navigation, and other interface
components. Bootstrap is the seventh-most-starred project on GitHub, with more than
142,000 stars, behind freeCodeCamp (almost 312,000 stars) and marginally behind
Vue.js framework.
3) WAMPSERVER :
WampServer refers to a solution stack for the Microsoft Windows operating system,
created by Romain Bourdon and consisting of the Apache web server, OpenSSL for
SSL support, MySQL database and PHP programming language.
4) SUBLIME TEXT
Sublime Text is a proprietary cross-platform source code editor with a Python
application programming interface. It natively supports many programming languages
and markup languages, and functions can be added by users with plugins, typically
community-built and maintained under free-s
5) Notepad ++
Image result for notepad++ informationnotepad-plus-plus.org Notepad++ is a text
editor and source code editor for use with Microsoft Windows.
Chapter 4
Result and Analysis
4.1 Results
a)HOME PAGE
b) LOGIN PAGE
c) SIGN UP PAGE
d) SETTINGS PAGE :
e) PRODUCTS PAGE :
f) CART PAGE :
g) SUCCESS PAGE
h) NAVIGATION BAR :
4.2 Scope
 Web Security At Client Side
In this research work we proposed PECA, but it still has shortcomings. For
example, when web document is required to be save in the portable extended
memory it reduces the security due to decentralization of data. During updates
at client side malicious codes may transfer to the client machine. So, a web
security framework is required at the client side to make PECA more secure
and better performer. So in near future, PECA and SWAM may be merged.
 Server Side Load Balancing

Load balancing is a concept which is still under research. Everyday new
frameworks, algorithms and models are being developed and existing models
are updated. There is a vast scope for future enhancement. For example, the
users are sending arbitrary data as a query on the web, and hence web-centric
queries can be optimized at server level to reduce server load to improve the
server performance. Further, implementation of our work is pending and hence
an improvement may be recommended in the same.
 Ant Based Technology for Collective Intelligence At Server Side

The developers are distributing server’s data to reduce the server’s load. This
mechanism is increasing the requirement of collective intelligence. In this
research work, ant technology for collective intelligence is used, but this is
framework is based on client’s query. There are still many unopened questions.
For example, what and how much data is available in near servers? Are these
servers are reliable? What is the credibility of these servers? In particular the
server must have all the relevant information of their relative servers.
4.3 Future Work
1. Artificial Intelligence
There is no denying the fact that AI is the future of web development while the phase
has already started at a greater speed. There are many leading organizations including
Google that have launched their AI-specific technology for the general public which
allows them to create powerful websites. In addition to this, Grid is one of the most
sought-after AI implementations that allows content-specific web development in no
time Furthermore, the ADI tools that have been launched now allows automated
website development which can be further customized according to the web
developers. Apple’s Siri and Google’s Alexa are some of the most common examples
of an AI system that recognizes human speech, analyzes it by tracking patterns and
offers the best user experience based on the information interpreted. Another one of
the fastest-growing AI trends is speech recognition which now plays an important role
in revolutionizing the world of mobile and web development. AI has indeed become
an indispensable part of human lives.
2. Internet of Things
IoT (Internet of Things) is another best area of web development that is now slowly
pacing towards ruling the world. For instance, it is the technology that has been
specifically designed to make our life management easy. Web developers will soon be
able to use the IoT for mankind for information and data analysis for their projects. It
is the area of science that allows us to collect the data of physical objects over the
cloud with the help of the internet. One of the most common examples of IoT that can
be used to explain its analogy would be the fitness bands or smartwatches. They can
track every activity of its user while storing the information over the cloud which can
be further used for optimizing the health goals as well as tracking sleep, nutrition and
health concerns. The future websites will have the same features implemented in them
just like Siri or Alexa thereby offering the best life management ever.
3. Virtual Reality
Virtual reality is one of the most determined phenomena that have been affecting the
web design and development since past few years. The designers make use of virtual
reality to offer its users a stimulating environment by implementing the best traits of
computer technology. The websites designed with virtual reality can allow the users
to experience the 3D world in real-time and engage with it. Several famous
organizations are looking for web developers with adequate skills of virtual reality
that can be implemented in their business models. This can offer their clients to
engage with their products virtually thereby increasing the overall customer
satisfaction.
4. 360 Degree Video

360 Degree video creation is one of the most sought-after skills that is currently
cherished by major organizations across the world. The 360-degree videos are
responsible for offering an interactive and enhanced UI design that further helps in the
growth of a website by driving more engagement. The video clips are hereby used for
offering the user a virtual experience of the product with every angle easily described
and explained. Having prior experience in virtual reality can easily allow designers or
developers to create 360-degree videos for increased customer engagement.
5. Voice Command
Voice command is another example of the AI and its implementations. A user can
now use the voice commands to control and handle every prospect of his smartphone,
TV screens, laptops, tablets or more. The technology has eventually enhanced as
compared to the past years. The user can even call an Uber just with a voice command
without making use of the application. This is one of the gifts this technology brings
to life.
CHAPTER 5
CONCLUSION
This chapter summarizes the main success of this research work
and discusses an about future research work to achieve the
ultimate goal in the field of performance of web accessibility,
web security, load balancing and collective intelligence. An in
depth literature survey was carried out and the critical analysis
of the same raised the following major shortcomings and
challenges in the web-centric query optimization techniques.
I get an introduction to the web Development and also able to
create my own website page using various method like
Netbeans, Bootstrap and Wampserver(PhpMyadmin). This
course gives a basic idea to a person about creating a web page
using different languages and styling over a course of Six weeks
so that a person can become comfortable in the field and he/she
if wanted can be able to pursue a career in this and can go deep
into the libraries used in the training. The Languages such as
HTML, SQL and PHP are very easy and user friendly so that a
person can able to focus more on the web developing aspect on
the other hand he/she can also able to switch to the web
designing in web development if he/she comfortable in it.
BIBLIOGRAPHY
[1] World Wide Web Design with HTML; By: C. Xavier
[2] https://www.overleaf.com/project
[3] https://www.w3schools.com
[4] https://www.geeksforgeeks.org
[5] https://www.wikipedia.org/
[6] https://in.000webhost.com/
[7] https://github.com/
[8] https://www.scribd.com/
[9] https://stackoverflow.com/
[10] https://:youtube.com
iv

IndustrialTraining Report - Format - Doc-1

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

IndustrialTraining Report - Format - Doc-1

Uploaded by

Copyright:

Available Formats

AN

INDUSTRIAL TRAINING REPORT

RAJIV GANDHI PROUDYOGIKI VISHWAVIDYALAYA

Under The Guidance of

Department of Electronics & Communication Engineering

I “ANJALI SINGH” hereby declare that I have undertaken 2 weeks Industrial

Training at “BETA BLUE FOUNDATION” during a period from 2/08/21 to

17/08/21 in partial fulfillment of requirements for the award of degree of B.Tech

(ELECTRONICS & COMMUNICATION ENGINEERING) at ORIENTAL

INSTITUTE OF SCIENCE AND TECHNOLOGY, BHOPAL. The work which

is being presented in the training report submitted to Department of

ELECTRONICS & COMMUNICATION ENGINEERING at ORIENTAL

INSTITUTE OF SCIENCE AND TECHNOLOGY, BHOPAL is an authentic

record of training work.

Signature of the Student with Seal

Signature of Faculty Coordinator Signature of H.O.D.

Prof. M.Hasnine Mirza Dr Manish Sawale

The aim of this Bachelor’s thesis was to

My special goes to Suresh Uplavdiya, Manager, Beta Blue Foundation

Nevertheless, I would like to place on record my deep sense of gratitude to

Student Name – ANJALI SINGH

Title Page No.

Abstract ……… ……………………………….…………….…i

Beta Blue Foundation is a software company based in Hyderabad providing

The existing system works by manually supplying information regarding an

advertisement to be placed in the media (Newspapers, magazines, etc) which

the sense of the advertisement.

1.3 Business Functions of the Organization

Beta Blue foundation offers training to students, corporates, institutions and

security agencies. They provide services and education. In education they

In services they provide internship and training.

 DATA BASE SET-UP

 Block Chain SET-UP

Our Training & Certification Courses

 Web Development (Basic)

HTML ( FRONT END DEVELOPMENT)

HTML PAGE STRUCTURE

TAGS AND ELEMENTS

<p>: Opening Tag </p>: Closing Tag

Opening Tag and Closing Tag together are called as a Container .

<a href=”link” target=”_blank”>

CASCADING STYLE SHEETS (CSS)

Navigation Bar and logo are together often referred to as a header.

It collects information stored in databases or sent to the server. Using

★ Second method to link Bootstrap file :

JUMBOTRON AND GLYPHICONS

Thumbnails are reduced versions of audio and videos.

<input type=”text” class=”form-control” name=”first_name”>

STYLING CHECKBOXES AND RADIO BUTTONS :

<input type=”checkbox” name=”food” value=”coffee” checked>Coffee

STRUCTURED QUERY LANGUAGE((SQL)

1) Flat file database

2) Relational database : a)hierarchical database

3) No SQL : a)Key value b)column oriented c)document oriented d)Graph DB

In technical terms; database is a set of multiple tables. Tables may be connected to

Structured Query Language : 1) It is used to communicate with the database. 2) My

ALTER AND DROP

FOREIGN KEY AND TRUNCATE

To view relation views add storage to innodb operations.

Data Definition Language(DDL)

PHP INTRODUCTION ( BACK END DEVELOPMENT )

VARIABLES , DATA TYPES AND OPERATORS